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TREINAMENTOS 


Sobre a K19 


A K19 é uma empresa especializada na capacitação de desenvolvedores de software. Sua equipe 
é composta por profissionais formados em Ciência da Computação pela Universidade de São Paulo 
(USP) e que possuem vasta experiência em treinamento de profissionais para área de TI. 


O principal objetivo da K19 é oferecer treinamentos de máxima qualidade e relacionados às prin- 
cipais tecnologias utilizadas pelas empresas. Através desses treinamentos, seus alunos tornam-se 
capacitados para atuar no mercado de trabalho. 


Visando a máxima qualidade, a K19 mantém as suas apostilas em constante renovação e melho- 
ria, oferece instalações físicas apropriadas para o ensino e seus instrutores estão sempre atualizados 
didática e tecnicamente. 
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Seguro Treinamento 
Na K19 o aluno faz o curso quantas vezes quiser! 


Comprometida com o aprendizado e com a satisfação dos seus alunos, a K19 é a única que pos- 
sui o Seguro Treinamento. Ao contratar um curso, o aluno poderá refazé-lo quantas vezes desejar 
mediante a disponibilidade de vagas e pagamento da franquia do Seguro Treinamento. 


As vagas nao preenchidas até um dia antes do inicio de uma turma da K19 seráo destinadas ao 
alunos que desejam utilizar o Seguro Treinamento. O valor da franquia para utilizar o Seguro Treina- 
mento é 10% do valor total do curso. 
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Termo de Uso 


Termo de Uso 


Todo o contetido desta apostila é propriedade da K19 Treinamentos. A apostila pode ser utilizada 
livremente para estudo pessoal . Além disso, este material didático pode ser utilizado como material 
de apoio em cursos de ensino superior desde que a instituição correspondente seja reconhecida pelo 
MEC (Ministério da Educação) e que a K19 seja citada explicitamente como proprietária do material. 


É proibida qualquer utilização desse material que não se enquadre nas condições acima sem 
o prévio consentimento formal, por escrito, da K19 Treinamentos. O uso indevido está sujeito às 
medidas legais cabíveis. 
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Conheca os nossos cursos 


“cr K01- Logica de Programação 
Ae KO? - Desenvolvimento Web com HTML, CSS e JavaScript 
aN KO3 - SQL e Modelo Relacional 
e K11 - Orientação a Objetos em Java 
NY K12 - Desenvolvimento Web com JSF2 e JPA2 
A K21 - Persistência com JPA2 e Hibernate 
K22 - Desenvolvimento Web Avançado com JFS2, EJB3.1 e CDI 
DA K23 - Integração de Sistemas com Webservices, JMS e EJB 
wr K41 - Desenvolvimento Mobile com Android 
a 
am K51 -Design Patterns em Java 
u 
“ K52 - Desenvolvimento Web com Struts 
Ab K31 - C# e Orientação a Objetos 


VEM K32 - Desenvolvimento Web com ASP.NET MVC 


www.k19.com.br/cursos 
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INTRODUCAO 


CAPITULO 


‘© Sites e Aplicações Web 


Normalmente, as pessoas utilizam o termo site quando se referem a blogs, sites de notícias, sites 
institucionais, portais, lojas virtuais, entre outros. Jáa denominacáo aplicacáo web é muito utilizada 
para sistemas de gestáo empresarial que sáo acessados através de navegadores (browsers). 


Não há uma definição exata que diferencie claramente sites e aplicações web. Alguns defendem 
que os sites são read-only (somente leitura) enquanto as aplicações web são read-write (leitura e 
escrita). Nessa definição, os sites apenas fornecem conteúdo enquanto as aplicações web podem 
fornecer e/ou receber conteúdo. 


Seguindo essa linha de raciocínio, algumas pessoas gostam de utilizar o grau de interatividade 
com os usuários para classificar como site ou aplicação web. Nessa visão, aplicações web seriam 
mais interativas e os sites menos interativos. Contudo, não há uma medida definida para calcular 
esse grau de interatividade e com isso aplicar de forma objetiva essa classificação. Dessa forma, essa 
diferenciação, na prática, é subjetiva. 


Outras pessoas preferem utilizar o critério do propósito para classificar como site ou aplicação 
web. Por exemplo, se o propósito é divulgar as informações de uma empresa, os dados de um pro- 
duto, as notícias de um determinado assunto, utiliza-se o termo site. Se o propósito é criar uma 
ferramenta para controlar as atividades administrativas de uma organização, utiliza-se a denomina- 
ção aplicação web. 


Utilizando o critério do propósito para classificar como site ou aplicação web, podemos concluir 
que, geralmente, os sites necessitam de uma interface mais atrativa pois normalmente estão “ven- 
dendo” alguma coisa ou alguma ideia. Por outro lado, na maior parte dos casos, o mais importante 
para as aplicações web é possuir uma interface fácil de utilizar. 


Independentemente do critério de classificação utilizado, os tópicos discutidos nesse treina- 
mento são importantes tanto para o desenvolvimento de sites quanto para o desenvolvimento de 
aplicações web. Portanto, do nosso ponto de vista, essas diferenças não serão tão relevantes. 
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Figura 1.2: Aplicações Web 
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‘© Navegadores e Dispositivos 


As pessoas acessam sites e aplicações web através de navegadores (browsers) como Chrome, 
Firefox, Internet Explorer e Safari. Normalmente, esses navegadores possuem algumas diferencas 
na forma de exibir as páginas web aos usuários. Antigamente, essas diferencas eram maiores. Com 
o passar do tempo, os navegadores ficaram cada vez mais parecidos nesse aspecto. Contudo, os 
desenvolvedores web ainda devem tomar cuidado com essas diferenças. 


40,44% 


Chrome 


Figura 1.3: Índice de utilização dos navegadores em Outubro de 2013 (fonte http: / /gs. statcounter.com/) 


Outro problema de compatibilidade importante é causado pela grande variedade de dispositivos 
que podem ser utilizados para acessar os sites e as aplicações web. Atualmente, as pessoas acessam 
os sites e as aplicações web através de computadores tradicionais, tablets, celulares, televisores, entre 
outros. Esses dispositivos possuem telas de tamanhos diferentes. Dessa forma, os desenvolvedores 
web devem considerar essas diferenças na criação das páginas web. Hoje em dia, fala-se muito de 
design responsivo. Os sites ou as aplicações web são ditos responsivos se eles estão preparados para 
diferentes tamanhos de tela. 


Figura 1.4: Design Responsivo 
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‘© Web Servers e HTTP 


Os sites e as aplicações web são implantados em computadores conectados à Internet ou a uma 
rede privada qualquer (Intranet). Normalmente, os sites sáo implantados em computadores conec- 
tados à Internet pois assim poderão ser acessados praticamente de qualquer lugar do mundo. Por 
outro lado, as aplicações web, muitas vezes, são implantadas em computadores conectados a uma 
Intranet pois é comum ser necessário restringir o acesso externo à elas. 


Figura 1.5: Internet 


Figura 1.6: Intranet 


Os computadores nos quais os sites e as aplicações web são implantados são chamados de Web 
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Servers. Quando acessamos uma página web através de um navegador, ele realiza uma requisição 
ao Web Server onde essa página está armazenada. Ao receber a resposta do Web Server com a página 
web solicitada, o navegador a exibe para nós. As mensagens de requisição e resposta trocadas entre 
o navegador e o web server são definidas pelo protocolo HTTP. 


P 


GET /cursos/k02 HTTP/1.1 
4 Host: k19.com.br 


HTTP/1.1 200 OK 

Date: Mon, 23 May 2014 22:38:34 GMT 

Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) 
Last-Modified: Wed, 08 Jan 2014 23:11:55 GMT 
Content-Type: text/html; charset=UTF-8 
Content-Length: 131 

Connection: Keep-Alive 


<html> 
<head> 
<title>K19 - Treinamentos</title> 
</head> 
<body> 
K02 - Desenvolvimento Web com HTML, CSS e JavaScript 
</body> 
</html> 


Figura 1.7: Interação entre os navegadores e os Web Servers 


Considere um site ou uma aplicacáo web implantado em um Web Server que está conectado a 
uma rede. A princípio, qualquer navegador executando em um dispositivo conectado a essa rede 
pode realizar requisições a esse Web Server. 


Alguns softwares especializados são utilizados para administrar os sites e as aplicações web im- 
plantadas nos Web Servers. Os principais sáo o Apache HTTP Server da Apache Software Founda- 
tion e o Internet Information Services (IIS) da Microsoft. 


‘© Dominios e enderecos IP 


Os dispositivos conectados a uma rede são identificados através de endereços formados por 
sequéncias de nümeros. Esses enderecos sáo chamados de enderecos IP. Em uma Intranet, quem 
controla os endereços IP dos dispositivos conectados é a própria organização que administra essa In- 
tranet. Por outro lado, os enderecos IP dos dispositivos conectados à Internet sáo gerenciados pelos 
provedores de acesso (ISP). 
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IP: 32.104.18.0 
IP: 64.77.45.64 


B 


IP: 57.250.252.0 


IP: 64.64.0.146 


E IP: 63.250.182.40 
IP: 63.250.139.0 
IP: 63.250.139.96 


Figura 1.8: Endereços IP 


A princípio, para acessar uma página de um site ou de uma aplicacáo web, devemos conhecer o 
endereço IP do Web Server que contém esse site ou essa aplicação web. Atualmente, o endereço IP do 
Web Server onde o site da K19 está implantado é 184.72.247.119. Podemos utilizar esse endereco IP 
para acessar as páginas do site da K19. O endereco IP 200.144.183.244 está vinculado a um dos Web 
Servers onde o site da USP está implantado. Também podemos acessar as páginas do site da USP 
utilizando diretamente esse endereço IP. Analogamente, podemos acessar as páginas da Wikipédia 
utilizando o endereco IP 208.80.152.130. 


Novagua x 


C a 184.72.247.119 


— Web Server da K19 
IP: 184.72.247.119 


Figura 1.9: Acessando o Web Server da K19 pelo endereco IP 


6 www.k19.com.br 29) KIS 


7 INTRODUÇÃO 


Novaguia x 


C a 200.144.183.244 


Universidade de São Paulo 
Brad 


international Cooper ation cane | 


— — Web Server da USP 
IP: 200.144.183.244 


Figura 1.10: Acessando o Web Server da USP pelo endereco IP 


Nova guia x 


C a 208.80.152.130 = 


T^^ rowe 


= Web Server da Wikipédia 
IP: 208.80.152.130 


Figura 1.11: Acessando o Web Server da Wikipédia pelo endereço IP 


Se vocé tiver uma memória muito boa pode decorar os enderecos IP dos sites que acessa com 
maior frequéncia. Mas, para maior parte das pessoas, seria impossível decorar tantos nümeros. Para 
resolver esse problema, os enderecos IP sao associados a dominios. Veja alguns exemplos de domí- 
nios. 


e www.k19.com.br 


* www.usp.br 


* www.wikipedia.org 


As pessoas conseguem decorar ou deduzir os domínios bem mais facilmente do que os enderecos 
IP. 
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Novaguia x 


C &www.k19.com.br 


KIS 


D— ® | 


pm 


Precinanoo capactar a wor equipe? 


— Web Server da K19 


www.k19.com.br 


Figura 1.12: Acessando o Web Server da K19 pelo domínio 


Novaguia x 


C a www.usp.br = 


Universidade de São Paulo 
Brad 


= Web Server da USP 
www.usp.br 
Figura 1.13: Acessando o Web Server da USP pelo dominio 


Novaguia x 


C a www.wikipedia.org = 


<a 
t3 
T n pç [Dig —: 


WIKIPÈDIA 


mm : — — Web Server da Wikipedia 
www.wikipedia.org 
Figura 1.14: Acessando o Web Server da Wikipédia pelo dominio 


Ha uma outra vantagem importante dos dominios sobre os enderecos IP. Em alguns casos, o en- 
dereco IP de um Web Server precisa ser alterado. Geralmente, essa modificação ocorre por motivos 
técnicos. Supondo que essa mudanga ocorra, quem estiver acessando esse Web Server através do 
endereço IP antigo não conseguirá mais acessá-lo dessa forma. Por outro lado, quem estiver aces- 
sando esse Web Server através do domínio dele poderá continuar acessando da mesma forma pois 
esse domínio pode ser facilmente associado ao novo endereço IP 
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wel www.k19.com.br 2 Dit 

Web Server da K19 
leal X% ces aseensa seco ciare amest rue como como ZA www.k19.com.br 
". T IP: 184.72.247.119 
Novo Web Server da K19 


www.k19.com.br 
IP: 57.250.252.0 


Figura 1.15: Alteração do Web Server 


Os dominios sao controlados por organizacóes geralmente vinculadas ao governo. Por exemplo, 
os domínios .br sáo controlados e disponibilizados pelo Registro de Domínios para a Internet no 
Brasil (registro.br). 


‘© DNS (Domain Name System) 


Como vimos, podemos acessar um Web Server diretamente através do seu endereco IP ou indi- 
retamente através de um domínio. Para utilizar a segunda abordagem, é necessário consultar um 
servidor DNS para "traduzir" o domínio desejado para o endereco IP correspondente. Basicamente, 
a tarefa dos servidores DNS é informar o endereco IP associado a um domínio. 
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€ à www.k19.com.br 


Web Server DNS 


KIS 


Web Server da K19 


Figura 1.16: Interação entre os navegadores e os servidores DNS 


Há diversos servidores DNS que são públicos. Fis uma lista com alguns deles. 


* OpenDNS (208.67.222.222 e 208.67.220.220) 
* Google Public DNS (8.8.8.8 e 8.8.4.4) 
* Level3 (209.244.0.3 e 209.244.0.4) 


"9 Servicos de Hospedagem 


Uma organização pode possuir computadores atuando como Web Servers em sua propria infra- 
estrutura ou na infraestrutura de empresas especializadas. Em determinadas situações, a primeira 
possibilidade é mais conveniente. 


Por exemplo, normalmente, as instituições bancárias preferem manter os seus sites e as suas 
aplicações web em Web Servers dentro da sua própria infraestrutura. Essa abordagem permite um 
controle maior da comunicação entre essas instituições e os seus clientes. Mas, ela exige grandes 
investimentos. Para garantir que os seus Web Servers estejam sempre funcionando, essas instituições 
bancárias mantêm profissionais 24 horas por dia 7 dias por semana (24/7). Caso contrário, os sites 
ou as aplicações web dessas instituições podem ficar fora do ar e gerar grandes prejuízos. 


Por outro lado, muitas vezes, é mais conveniente manter os Web Servers de uma organização na 
infraestrutura de uma empresa especializada. Dessa forma, a responsabilidade de mantê-los fun- 
cionando é delegada à essa empresa. Essa abordagem, geralmente, diminui os custos. Contudo, o 
controle é delegado a uma outra empresa. O serviço oferecido por essas empresas é denominado 
serviço de hospedagem. Eis uma lista de empresas que oferecem esse tipo de serviço. 


* Amazon 
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* Localweb 


* UOL 


"O SEO (Search Engine Optimization) 


Hoje em dia, a principal forma de encontrar um site é utilizar alguma ferramenta de busca. A 
mais importante delas, atualmente, é o Google. Essas ferramentas encontram os sites que possuem 
conteüdo relacionado às palavras chaves utilizadas nas buscas. Os sites mais relevantes sáo apresen- 
tados antes e com maior destaque. 


Para responder rapidamente às consultas realizadas, as ferramentas de busca analisam previ- 
amente os sites. Esse processo de análise é chamado de indexação. A indexação é realizada por 
programas de computador que interagem com os sites para obter informações sobre o conteúdo de 
cada um deles. Esses programas sáo chamados de robós. 


Figura 1.17: Robós 


No desenvolvimento de um site, podemos aplicar técnicas que facilitam e melhoram a análise 
dos robós das ferramentas de busca. Essas técnicas sáo desenvolvidas pelos especialistas em SEO 
(Search Engine Optimization). 


Normalmente, as técnicas de SEO são mais importantes para os sites do que para as aplicações 
web. 


‘© Arquitetura Web 


Vamos utilizar um diagrama para apresentar uma visáo geral da arquitetura web. 
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Web Server 


Client Side Server Side 


Figura 1.18: Diagrama geral da arquitetura web 


Observe que o diagrama foi dividido em duas partes: client side e server side. Alguns profissi- 
onais se especializam no client side e outros no server side. Outra denominação possível para client 
side é front-end e para server side é back-end. 


Por exemplo, um web designer deve ter bons conhecimentos do client side. Por outro lado, um 
programador web deve ter bons conhecimentos do server side. 


Geralmente, os web designers não precisam ter conhecimento do server side mas tê-lo pode ser 
útil. Por outro lado, os programadores web precisam conhecer razoavelmente bem o client side. 
Nesse treinamento, estamos interessados especificamente no client side. 


‘© Ativando o IIS e ASP Classic no Windows 7 


Se vocé quiser utilizar o Windows 7 para fazer os exercícios dos próximos capítulos, instale o IIS 
e o ASP Classic de acordo com os passos a seguir. 


No menu /niciar, clique em Painel de Controle. 
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E Ponto de Partida 


"3 Conectar a um Projetor 


K19 
Calculadora 

Documentos 
a Notas Autoadesivas 
gQ Ferramenta de Captura 
F Paint 


Há Visualizador XPS 


Imagens 


Mús 


<i Windows Fax and Scan 
Dispositivos e Impres 


A. Conexão de Área de Trabalho 
Remota Programas Padrão 


Au Lupa Ajuda e Suporte 


> Todos os Programas 


LJ 


Pesquisar programas e arquivos ^» | | Desligar m 


No Painel de Controle, clique em Programas. 


[ Be Sistema e Segurança 
Verificar o status do computador 
Fazer backup do computador 
Encontrar e corrigir problemas 


_ Rede eInternet 
a. Exibir o status e as tarefas da rede 
e. 


Escolher opções de grupo doméstico e de 


Contas de Usuário e Segurança Familiar 

® Adicionar ou remover contas de usuário 

ia] Configurar controles dos pais para qualquer 
usuario 

Aparência e Personalização 

Alterar o tema 

Alterar plano de fundo da área de trabalho 

Ajustar a resolução da tela 


j 4 Hardware e Sons D Relógio, Idioma e Região 


compartilhamento 


Exibir impressoras e dispositivos Alterar os teclados ou outros métodos de entrada 
Adicionar um dispositivo Alterar idioma de exibição 
Ajustar as configurações de mobilidade comumente = 

Facilidade de Acesso 


usadas 
dm Permitir que o Windows sugira configurações 


Otimizar exibição visual 
Care) um programa 


Em Programas, clique em Ativar ou desativar recursos do Windows. 


Gl Programas e Recurso y d 
E Desinstalar um programa 8 Ativar ou desativar recursos do Windows |) Exibir atualizações instaladas 


Executar programas criados para versoes anteriores do Windows omo instalar um programa 


e Programas Padrão 


Alterar as configurações padrão para a mídia ou os dispositivos 
Fazer com que um tipo de arquivo sempre seja aberto em um programa específico 
Definir os programas padrão 


r$ Gadgets da Área de Trabalho 
Adicionar gadgets à área detrabalho | Obter mais gadgets online | Desinstalar um gadget 
Restaurar gadgets da área de trabalho instalados com o Windows 


K | ce www.facebook.com/k19treinamentos 13 


INTRODUGAO 


14 


Aguarde o carregamento da lista de recursos que podem ser ativados ou desativados. 


Ativar ou desativar recursos do Windows e 


Para ativar um recurso, marque sua caixa de seleção. Para desativar um 
recurso, desmarque sua caixa de seleção. Uma caixa preenchida significa 
que somente parte do recurso está ativada. 


Aguarde... 


a Gas 


Selecione os recursos de acordo com a imagem a seguir e clique no botão OK. 


Ativar ou desativar recursos do Windows @ 


Para ativar um recurso, marque sua caixa de seleção. Para desativar um 
recurso, desmarque sua caixa de seleção. Uma caixa preenchida significa 
que somente parte do recurso está ativada. 


E [| Serviços da World Wide Web 
c E i Manutenção e Diagnóstico 

Œ [B) |; Recursos de Desempenho 
a 


J| |) Extensibilidade do .NET 

V) |) Extensões ISAPI 

V] )) Filtros ISAPI 

|), Server-Side Includes 

pE " Recursos HTTP Comuns 

m [ill] |) Segurança 

E Servidor FTP 

[à B Serviços TCPIP simples (echo, daytime etc.) 
|J) Serviços XPS 


m 


< 


E 
e 


FIJ Servidor Telnet 
EB El ies Ninn das VNC 
«I " ] p 


F) RIP de Escuta ^ 


di Servidor do MSMQ (Microsoft Message Queue) E 


Aguarde a ativação dos recursos selecionados. 
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Ativar ou desativar recursos do Windows @ 


Para ativar um recurso, marque sua caixa de seleção. Para desativar um 
que somente parte do recurso está ativada. 

[EJ RIP de Escuta A 
iço de Ativação de Processos do Windows 


Aguarde enquanto o Windows faz alterações 
nos recursos. Isso pode demorar vários 
minutos. 


[WS 


EH Server-Side Includes 

m [ill] J; Recursos HTTP Comuns 

m] segurança 
[Pb Servidor FTP 
[7] ) Serviços TCPIP simples (echo, daytime etc.) 
[V] jj Serviços XPS 

Servidor do MSMQ (Microsoft Message Queue) 

E Servidor Telnet 


- 
[EB di in tintin. VNE 


[or )[ concem | 


4 


Depois do término da ativação, abra um navegador e acesse o endereço http://localhost. 


spe Favoritos | di [BB Sites Sugeridos + (E) Galeria do Web Slice + 
es i ul ty - 


internet information servic 


fay 810% +. 
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"9 Instalacáo do Apache HTTP Server no Ubuntu 13.04 


Se vocé quiser utilizar o Ubuntu 13.04 para fazer os exercícios dos próximos capítulos, instale o 
Apache HTTP Server de acordo com os passos a seguir. 


Abra um terminal e digite os seguintes comandos. 


sudo apt-get update 
sudo apt-get install apache2 
sudo apt-get install php5 libapache2-mod-php5 


sudo service apache2 restart 


Configuracáo do Userdir 
Configure o userdir do Apache HTTP Server seguindo passos abaixo. 


sudo a2enmod userdir 
sudo service apache2 restart 


mkdir ~/public_html && chmod 0755 -/public html 


"9 Apache HTTP Server no Mac OS X Mountain Lion 


Se vocé quiser utilizar o Mac OS X Mountain Lion para fazer os exercícios dos próximos capítulos, 
configure o Apache HTTP Server de acordo com os passos a seguir. 


1. No diretório /etc/apache2/users/, crie um arquivo de configuração com o nome do seu usuário 
(ex: jonas.conf). 


«Directory "/Users/nome. do usuario/Sites/"> 
Options FollowSymLinks Indexes MultiViews 
AllowOverride All 
Order allow,deny 
Allow from all 

</Directory> 


Au kWN 


Código XML 1.1: nome_do_usuario.conf 


2. Altere as permissões do arquivo criado anteriormente. 


sudo chmod 644 nome. do usuario.conf 


3. Localize, no arquivo /etc/apache2/httpd.conf, a linha: 


#LoadModule php5_module libexec/apache2/libphp5.so 
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4. Descomente a linha encontrada anteriormente. 


= 


LoadModule php5_module libexec/apache2/libphp5.so 


5. Crie uma pasta chamada Sites na pasta do seu usuario. 


mkdir ~/Sites 


6. Inicie o Apache HTTP Server. 


sudo apachectl start 


7. Configure o Apache HTTP Server para iniciar automaticamente. 


sudo defaults write /System/Library/LaunchDaemons/org.apache.httpd Disabled -bool false 


v 


— Resumo do Capítulo 


[s Não há um critério exato para diferenciar o que é um site e o que é uma aplicação web. 


p> Os desenvolvedores web devem considerar as diferenças entre os navegadores (browsers) e os 
dispositivos (computadores, tablets, celulares, tvs, entre outros) na criação das páginas web de um 
site ou de uma aplicação web. 


p> A Internet é a maior rede pública de computadores. 

p- Uma rede privada de computadores é denominada Intranet 

B> Os sites e as aplicações web são implantados em computadores denominados Web Servers. 
> As mensagens trocadas entre os navegadores e os Web Servers seguem 0 protocolo HTTP. 


p> Os dispositivos conectados a uma rede de computadores são identificados através de endereços 
IP. 


> Para nao ter que decorar enderecos IP, podemos utilizar dominios. 


p A utilizacáo de domínios facilita uma eventual troca do endereco IP de um Web Server. 
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p A funcáo principal de um servidor DNS é traduzir dominios para enderecos IP. 


p Organizações de grande porte costuma implantar os seus sites e as suas aplicações web em Web 
Servers dentro da sua própria infraestrutura. Por outro lado, organizações menores, normalmente, 
preferem contratam empresas especializadas no servico de hospedagem. 


p As técnicas de SEO sao aplicadas com o intuito de melhorar o posicionamento de um site nos 
resultados das consultas realizadas nas ferramentas de busca. 


p Podemos dividir a arquitetura web em duas partes: client side e server side. 


Q Prova 


Qual alternativa está correta? 


a) Existe uma divisão clara e exata entre o conceito de site e aplicação web. 


b) Geralmente, os sites possuem maior grau de interatividade com o usuário do que as aplicações 
web. 


c) As aplicações web não são utilizadas como ferramentas para controle administrativo de uma 
empresa. 


d) Geralmente, os sites “vendem” algum produto ou alguma ideia. 


e) Geralmente, as aplicações web “vendem” algum produto ou alguma ideia. 


Qual alternativa está correta? 


a) A forma de exibição das página web é padrão em todos os navegadores. 

b) A forma de exibição das página web é padrão em todos os dispositivos. 

c) O Design Responsivo trata de questões relacionadas à performance dos sites. 

d) O Design Responsivo trata de questões relacionadas à performance dos navegadores. 


e) Os sites ou as aplicações web são ditos responsivos se eles estão preparados para diferentes 
tamanhos de tela. 


Qual alternativa está correta? 


a) HTTP é protocolo de comunicação. 
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b) A Internet é uma rede de computadores privada. 
C) Os sites e as aplicações web são implantados em Web Computers. 
d) Aplicações web só podem ser implantadas em redes privadas. 


e) Sites só podem ser implantados na Internet. 


n Qual alternativa está correta? 


a) O endereço IP de um dispositivo determina precisamente a localização geográfica desse dis- 
positivo. 


b) O contetido de um site é determinado pelo dominio associado ao Web Server onde esse site 
está implantado. 


c) Domínios sáo associados a enderecos IP. 
d) Para aplicações web devemos utilizar dominios especiais. 


e) Todo domínio inicia com www. 


Qual alternativa está correta? 


a) A função principal de um servidor DNS (Domain Name System) é informar o nome do propri- 
etário de um site. 


b) O objetivo principal das empresas que fornecem serviços de hospedagem é vender dominios. 
c) Técnicas de SEO melhoram a velocidade de carregamento de um site. 
d) Técnicas de SEO melhoram o posicionamento dos sites nas ferramentas de busca. 


e) Oobjetivo das empresas especializadas em SEO é oferecer servicos de hospedagem. 


E Qual alternativa está correta? 


a) É comum dividir a arquitetura web em left side e right side. 

b) É comum dividir a arquitetura web em down side e up side. 

c) É comum dividir a arquitetura web em outside e inside. 

d) É comum dividir a arquitetura web em client side e server side. 


e) É comum dividir a arquitetura web em front side e back side. 


Minha Pontuação Pontuação Mínima: Pontuação Máxima: 
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CAPITULO 


‘© Introducáo 


Quando acessamos uma página web, estamos interessados na informação contida nessa página. 
Essa informação pode estar na forma de texto, imagem ou vídeo. O conteúdo de uma página web é 
definido com a linguagem HTML (HyperText Markup Language). HTML é uma linguagem de mar- 
cacáo originalmente proposta por Tim Berners-Lee no final da década de 1980. O objetivo do Tim 
Barners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa que 
quisesse disseminar documentos científicos. 


Desde sua proposta até os dias de hoje, a linguagem HTML sofreu diversas alterações. A cada 
versão, novos recursos são adicionados e problemas corrigidos. A versão mais atual da especificação 
da linguagem HTML é a 5. Essa versão ainda não foi finalizada, a previsão é que ela seja lançada em 
definitivo em Julho de 2014. Porém, os navegadores já implementam diversos recursos do HTML5. 
A especificação está disponível no endereço http: //www.w3.org/TR/htm15. 


As especificações da linguagem HTML são publicadas pelo World Wide Web Consortium mais 
conhecido por sua sigla W3C. Além do HTML, o W3C também é responsável por linguagens como o 
XML, o SVG e pela interface DOM (Document Object Model), por exemplo. 


‘© Estrutura Basica 


Basicamente, um documento HTML é composto por elementos hierarquicamente organizados. 
Para inserir um elemento em um documento HTML, devemos utilizar as tags correspondentes a 
esse elemento. As tags são definidas com parênteses angulares (« e >). Os elementos podem possuir 
atributos e conteúdo. Os atributos são formados por nome e valor. Normalmente, os valores dos 
atributos são definidos dentro de aspas dupla e o conteúdo dos elementos é um texto ou outros 
elementos. 
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Declaração do tipo de documento 


<!DOCTYPE html» 


Tag de abertura do elemento html 


<html lang-"pt-br"» 


Nome de atributo 
<head> F 
Valor de atributo 


content=” text/html; charset=UTF-8” > 


Tag de fechamento do elemento htm1 


Figura 2.1: Estrutura básica de um documento HTML 


‘| K19 Treinamentos x Y 


€ 3 Œ [N localhost/-keizo/html/public html/estrutura-basica.html Art $e = 


K02 - Desenvolvimento Web com HTML, CSS e JavaScript 


Figura 2.2: Estrutura básica de um documento HTML 


e Mais Sobre 
A especificação do HTML5 define duas sintaxes distintas para produzir documentos 
HTML. A primeira é denominada sintaxe HTML e a segunda é denominada sintaxe 
XHTML. A maior parte dos autores recomendam a utilização da sintaxe HTML. Nos exemplos 
e nos exercícios dessa apostila, a preferência será pela sintaxe HTML. 
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c» Mais Sobre 


De acordo com a especificação da linguagem HTML, alguns elementos são denomina- 
dos Normal Elements. Esses elementos sáo abertos com uma tag e fechados com 


outra tag. Por exemplo, o elemento p é um Normal Element. Observe a utilizacáo da tag de 
abertura e da tag de fechamento do elemento p. 


1 (&p»5K02 - Desenvolvimento Web com HTML, CSS e JavaScript{</p> 


2, Mais Sobre 
ig Há também elementos denominados Void Elements. Esses elementos não possuem 
conteúdo. Na sintaxe HTML, esses elementos são abertos e fechados com apenas uma 
tag com ou sem o caractere “/”. Um exemplo de Void Element é o elemento br. 


<p> 


K01 - Lógica de Programação(<br>) 
K02 - Desenvolvimento Web com HTML, CSS e JavaScript[<br/>) 
K03 - SQL e Modelo Relacional 

</p> 


ak wWwn 


Os Void Elements são: area, base, br, col, embed, hr, img, input, keygen, link, meta, 
param, source, track, wbr. 


Na sintaxe XHTML, os Void Elements podem ser abertos e fechados na mesma tag ou em tags 
separadas. Contudo, o caractere “/” é obrigatório. 


1 «p» 
2 K01 - Lógica de Programação|<xbr/> 
3 K02 - Desenvolvimento Web com HTML, CSS e JavaScript|<br></br> 
4 K03 - SQL e Modelo Relacional 
5 |</p> 
<!DOCTYPE> 


Para um navegador exibir corretamente uma pagina web, devemos informar explicitamente o 
tipo do documento. O tipo do documento é informado com a declaração <!IDOCTYPE>. Quando 
conveniente, discutiremos as principais diferenças entre os tipos de documentos mais importantes. 
Veja a declaração <!DOCTYPE> para os principais tipos de documentos. 


= 


<!DOCTYPE html» 


Cédigo HTML 2.4: HTML 5 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2 "http://www.w3.org/TR/html14/strict.dtd"» 


Código HTML 2.5: HTML 4.01 Strict 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
2 "http://www.w3.org/TR/htm14/1loose.dtd"» 


Código HTML 2.6: HTML 4.01 Transitional 
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1 «!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
2 "http://www.w3.org/TR/htm14/frameset.dtd"» 


Código HTML 2.7: HTML 4.01 Frameset 


1 stDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2 "http://www.w3.org/TR/xhtm11/DTD/xhtmll-transitional.dtd"» 


Código HTML 2.8: XHTML 1.0 Transitional 


1 «!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"» 


Código HTML 2.9: XHTML 1.0 Frameset 


1 «!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
2 "http://www.w3.org/TR/xhtml11/DTD/xhtm1l11.dtd"> 


Código HTML 2.10: XHTML 1.1 


«html» 


Os elementos HTML, com exceção do DOCTYPE, devem ser inseridos no conteúdo do elemento 
html. Esse elemento é aberto com a tag <html>, fechado com a tag </html> e deve conter exata- 


mente um elemento head seguido de exatamente um elemento body. 


Diversos autores recomendam a utilizacáo do atributo lang. Esse atributo indica a língua utili- 
zada no documento HTML ou na maior parte dele. Algumas ferramentas de leitura ou de tradução 
de texto podem utilizar esse atributo para descobrir facilmente em qual língua os textos contidos no 


documento HTML ou na maior parte dele foram escritos. 


SUDOCTYPE him 
(<html lang="pt-br"> 
<head> 


</head> 
<body> 


</body> 


OANA FWDNMY = 


<head> 


A principal função do elemento head é agrupar informações sobre o documento HTML (metain- 
formação). São exemplos de metainformações: o encoding, a taxa de atualização, o autor, a descrição 


e as palavras chaves do documento HTML. 


2 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

3 «meta http-equiv="refresh” contentz"30"» 

4 «meta name="author” content="Rafael Cosentino"» 

5 «meta name="description” content="Cursos de Java e .NET"» 

6 «meta name-"keywords" content="curso java, curso Ci"» 

7 

24 www.k19.com.br m rs 


25 HTML 


O elemento head é aberto e fechado pelas tags <head> e </head> respectivamente. Obrigatoria- 
mente, salvo algumas poucas excecóes, o corpo do head deve conter exatamente uma ocorréncia do 
elemento title. Esse elemento define o título do documento HTML. 


<head> 


(<title>K19 Treinamentos</title> 
</head> 


WN 


<body> 


O conteúdo de uma página web deve ser definido no corpo do elemento body. Por exemplo, 
podemos inserir no corpo do body cabecalhos, textos, listas, tabelas, entre outros componentes. 
Esse elemento é aberto pela tag <body> e fechado pela tag </body>. 


| 


2 <h1>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</h1> 


3 


Comentarios 


Podemos adicionar comentarios em um documento HTML dentro das tags <!-- e -->. Os comen- 
tários são ignorados pelos navegadores. 


<(DOCTYPE ini 

<html langz"pt-br"» 
<head> 

<!-- corpo do head -->] 

</head> 

<body> 

<!-- corpo do body -->] 
</body> 

</html> 


OANA RwnNnNa 


‘© Editores HTML 


Documentos HTML podem ser criados em qualquer editor de texto básico. Contudo, para ga- 
nhar produtividade, podemos utilizar ferramentas com mais recursos. Ha diversas opções de edito- 
res HTML, alguns gratuitos outros pagos. Nesse treinamento, utilizaremos o Netbeans como editor 
HTML. Na verdade, o Netbeans oferece muito mais recursos além do editor HTML. Contudo, agora, 
não estamos interessados nesses outros recursos. Você pode obter gratuitamente o Netbeans no en- 
dereço https: //netbeans.org/. 


‘© Ferramentas de Desenvolvimento Web 


Hoje em dia, os principais navegadores possuem ferramentas para testar e depurar as paginas 
web e a interacáo com os Web Servers. Nos exemplos dessa apostila, utilizaremos Chrome DevTools 
do navegador Chrome. Outra ferramenta muito importante é o Firebug do navegador Firefox. 
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(> Exercícios de Fixacáo 


e Abra o Netbeans e crie um projeto chamado html. 


Importante 
A No Windows, utilizando o IIS (Internet Information Services) como Web Server, vocé 
deve salvar o projeto html em C:\inetpub\wwwroot. Lembre-se que é necessário 
instalar o IIS conforme vimos anteriormente. 


Importante 

No Ubuntu, utilizando o Apache HTTP Server como Web Server, vocé deve salvar o pro- 

jeto html em /home/<USUARIO>/public html. Lembre-se que é necessário insta- 
lar e configurar o Apache HTTP Server como vimos anteriormente. 


800 NetBeans IDE 7.3 P 


a@asre TUM (O 


<No Project Open> 


Figura 2.3: Projeto html 
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000 NetBeans IDE 7.3 y" 
imm d» Qu eu T W » B- E (Qr Search (8+1) 8) 


Steps Choose Project 


1. Choose Project Categories: Projects: 
rs Code) 

PHP 
» [3 Samples KR 


1 


Description: 
Creates a new HTMLS application configured for HTML, CSS and JavaScript. 


3 
r4 


ET >) | Finish 


Figura 2.4: Projeto html 


000 NetBeans IDE 7.3 "a 
A B ER ELA jT M > B- į (Qr Search (+1) o 


Steps 
E |. <e 
- Name and Location ^ 5 
Project Location:| [ Browse... ] 


1 
2 
3. Site Template 
4. JavaScript Files 
Project Folder: [Users /keizo/Sites /html RN 


Figura 2.5: Projeto html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacaol.zip 
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6 Edite o arquivo index.html do projeto html que esta em Site Root. 


<!DOCTYPE html» 
<html langz"pt-br"» 
<!-— cabecalho: ==> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 Treinamentos</title> 
</head> 


mi COMO ==> 
<body> 
<p>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</p> 
</body> 
</html> 


aaa a 
WN OWOAN AN FWDNM = 


Código HTML 2.16: index.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao2.zip 


© No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public_html/index.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/index.html. 


o Utilize o Chrome DevTools ou o Firebug para analisar e modificar os elementos do documento 
HTML. 
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e> C | D localhost/-keizo/html/public html/index.html 
K02 - Desenvolvimento Web com HTML, CSS e JavaScript Back 
Forward 
Reload 
Save As... 
Print... 
Translate to English 
View Page Source 
View Page Info 
W Read later 
—ÓÓÓ—— 
Figura 2.6: Chrome DevTools 
ese | D localhost/-keizo/html/public html/index.html 
K02 - Desenvolvimento Web com HTML, CSS e JavaScript 
X |Elements| Resources Network Sources Timeline Profiles Audits Console 
<!DOCTYPE html> 
valtut tange  pt-brs- Styles | Computed Event Listeners Pass 
<I-— cabeçalho --> element.style { LIE E 
v <head> } 
«meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> pt user agent stylesheet 
<title>K19 Treinamentos</title> display: block; 
</head> -webkit-margin-before: lem; 
<!-- corpo --> -webkit-margin-after: lem; 
Y <body> -webkit-margin-start: 0px; 
<p>K02 — Desenvolvimento Web com HTML, CSS e JavaScript</p> -webkit-margin-end: 0px; 
</body> 
</html> 
Figura 2.7: Chrome DevTools 
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ese E localhost/-keizo/html/public html/index.html 


X |Elements| Resources Network Sources Timeline Profiles Audits Console 
<!DOCTYPE html» 
w«html lang="pt-br"> 


Styles| Computed Event Listeners » 
<!-- cabeçalho —> element. style { + pm 
} 
pt 
display: block; 
-webkit-margin-before: lem; 
-webkit-margin-after: lem; 
-webkit-margin-start: 0px; 
—webkit-margin-end: 6px; 


user agent stylesheet 


Figura 2.8: Chrome DevTools 


/ | K19 Treinamentos x 


C | D localhost/-keizo/html/public html/index.html 


es 


Texto modificado utilizando o Chrome DevTools 


E cibus eias Styles | Computed Event Listeners » 
Brad prei aes element.style { + ER X 
> «head»..«/head» ) 
<!-- corpo —> pti user agent stylesheet 
display: block; 
| | <p>Texto cado utilizando o Chrome De -webkit-margin-before: lem; 
</body> -webkit-margin-after: 1 
</html> -webkit-margin-start: " 
-webkit-margin-end: 0px; 


X |Elements | Resources Network Sources Timeline Profiles Audits Console 


Figura 2.9: Chrome DevTools 
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Ó Utilize o Chrome DevTools ou o Firebug para analisar a requisicáo HTTP e a resposta HTTP. 


eoo |; K19 Treinamentos x Vni 


€ » e| 


D localhost/-keizo/html/public html/index.html 


K02 - Desenvolvimento Web com € JavaScript 


x Elements Resources Sources Timeline Profiles Audits Console 


Status Size Time 
Text Content Latency 


Type Initiator 


200 653B 3ms 
text/html Other 2968 2m 


1 requests | 653B transferred | 3 ms (load: 85 ms, DOMContentLoaded: 86 ms) 


© EQ) | Documents Stylesheets Images Scripts XHR Fonts WebSockets Other 


Figura 2.10: Chrome DevTools 


K02 - Desenvolvimento Web com HTML, CSS e JavaScript 


X Elements Resources |Network! Sources Timeline Profiles Audits Console 


index.html 
/~keizo/ht: 


1 requests | 6534 


Boa 


Headers | Preview Response Cookies Timing 


Request URL: http: //localhost/=keizo/html/public html/index. html 
Request Method: GET 
Status Code: @ 200 0K 
v Request Headers view source 
Accept: text/html,application/xhtml«xml,application/xml;q-0.9,image/webp,*/*;q-0.8 
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: en-US, en;q=0.8 
Cache-Control: no-cache 
Connection: keep-alive 
Cookie: PHPSESSID-f9mmsak4clldnud8lo2adidhb4; JSESSIONID-37a1de661b636074be79ae075dc4; treeForm tree- 
hi- 
Host: localhost 
Pragma: no-cache 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10 8 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome 
/30.0.1599.28 Safari/537.36 
v Response Headers view source 
Accept-Ranges: bytes 
Connection: Keep-Alive 
Content-Length: 296 
Content-Type: text/html 
Date: Fri, 13 Sep 2013 20:49:39 GMT 
ETag: "1168818-128-4e635a1336dc0" 
Keep-Alive: timeout-5, max=100 
Last-Modified: Thu, 12 Sep 2013 20:31:59 GMT 
Server: Apache/2.2.22 (Unix) DAV/2 PHP/5.3.15 with Suhosin-Patch mod ssl/2.2.22 


= @ © Q |Documents Stylesheets Images Scripts XHR Fonts WebSockets Other 


Figura 2.11: Chrome DevTools 
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‘© semântica HTML 


As placas de sinalização são fundamentais para manter a ordem no tránsito. Cada placa possui 
um significado específico. A utilizacáo equivocada das placas de tránsito pode causar problemas 
como colisóes de veículos. 


Considere um cruzamento no qual é proibido virar a esquerda ou a direita (exemplo: Av. Re- 
bouças com Av Brasil ou Av. Prof. Francisco Morato com Av. Vital Brasil). Nesse cruzamento, o 
funcionário encarregado de instalar as placas de trânsito decidiu utilizar a sinalização abaixo. 


Figura 2.12: Marcador de perigo. 


Essa sinalização está totalmente equivocada. Ela indica a existência de obstáculos na pista que 
obrigam a passagem dos veículos pelo lado direito ou pelo lado esquerdo. O motorista que conhece 
o significado correto dessa placa pode decidir virar à direita ou à esquerda e sofrer uma colisão. Para 
não gerar confusão o funcionário poderia utilizar a placa abaixo. 


Figura 2.13: Siga em frente. 


Para manter a organização no trânsito, a semântica(significado) das sinalizações deve ser respei- 
tada. Analogamente, no desenvolvimento web, é fundamental respeitar o significado dos elementos 
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HTML. 


De acordo com a especificação da linguagem HTML, a maior parte dos elementos possuem um 
propósito bem definido. Para o funcionamento correto das páginas de uma aplicação web, é fun- 
damental respeitar o propósito de cada elemento e utilizá-lo nas condições corretas. Muitos autores 
utilizam o termo semântica HTML ao se referirem ao uso correto dos elementos da linguagem HTML. 


No exemplo abaixo, utilizamos o elemento p para definir um parágrafo. De acordo com a espe- 
cificação da linguagem HTML, esse elemento deve ser utilizado justamente para definir parágrafos. 
Portanto, ele foi aplicado corretamente. 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de uso correto da semántica HTML</title> 
</head> 
<body> 
<p>Este é um texto para mostrar o significado da tag p.</p> 
«/body» 
«/html» 


COON ADU RWYDNY >=> 


€ 


Código HTML 2.17: Exemplo de uso correto da semántica HTML 


Agora, vejamos outro exemplo: 


<!DOCTYPE html» 
«html langz"pt-br"» 
«head» 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Meus amigos - Site do Jonas - Criado pelo Jonas</title> 
</head> 
<body> 
<address> 
Rafael Cosentino 
rafael.cosentinoGk19.com.br 
Sócio fundador da K19 Treinamentos 
Av. Brigadeiro Faria Lima, 1571 - Jardim Paulistano - Sáo Paulo, SP 
CEP 01452-001 
</address> 


à; 


à 


à 


à 


à 


à 


«address» 
Marcelo Martins 
marcelo.martins@k19.com.br 
Socio fundador da K19 Treinamentos 
Av. Brigadeiro Faria Lima, 1571 - Jardim Paulistano - São Paulo, SP 
CEP 01452-001 

</address> 

</body> 
</html> 


à 


à 


à 
cO -410 071i C0 N2—0O ('ooo-40 0i 30 n0 >=> 


à 
Ite] 
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Código HTML 2.18: Exemplo de uso incorreto da semántica HTML 


Dessa vez, utilizamos o elemento address. De acordo com a especificação, esse elemento deve 
ser utilizado para fornecer informações de contato dos autores ou donos do documento. Normal- 
mente, esse elemento aparece no início ou no final das páginas. 


Se observarmos o exemplo mais atentamente, trata-se de uma página do site do Jonas (repare no 
título da página). O autor da página é o Jonas e nào o Rafael ou o Marcelo. Portanto, o elemento ad- 
dress foi aplicado incorretamente. Além disso, devemos evitar o uso desse elemento para informar 
endereços postais a menos que essas informações sejam relacionadas ao autor ou dono do docu- 


VA EIS www.acebook.com/kt9treinamentos 33 


HTML 34 


mento. 


‘© Titulos 


Assim como em um livro, uma pagina web pode conter uma hierarquia de titulos para estabelecer 
uma divisáo do seu contetido. Para inserir títulos em uma página web, devemos utilizar os elementos 
h1, h2, h3, h4, h5 e h6. Os sufixos numéricos de 1 a 6 indicam o nivel do título dentro da hierarquia 
de títulos do documento. Veja o exemplo: 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de titulos</title> 
</head> 
<body> 
<h1>Titulo 1</h1> 
<h2>Titulo 2</h2> 
<h3>Titulo 3</h3> 
<h4>Titulo 4</h4> 
<h5>Titulo 5</h5> 
<h6>Titulo 6</h6> 
</body> 
</html> 


ae ee ane] 
rRwUNAO WO JOUR UN 


Código HTML 2.19: Exemplo de títulos 


eoo Exemplo de títulos X x 


€ 3 Œ (5 localhost/-keizo/html/public html/titulos.html At te $ + 


Título 1 


Título 2 
Título 3 
Título 4 


Título 5 


Título 6 


Figura 2.14: Exemplo de títulos 


Observe que os títulos não foram exibidos lado a lado e sim um embaixo do outro. Geralmente, 
os navegadores exibem os títulos como blocos. Por padrão, esses blocos ocupam todo o espaço ho- 
rizontal do elemento onde os títulos estão contidos. No exemplo, os títulos estão contidos no corpo 
da página. Portanto, ocupam todo o espaço horizontal da página. Esse é o comportamento padrão 
dos block-level elements. Utilizando as ferramentas de desenvolvimento do Chrome, podemos vi- 
sualizar claramente esses blocos. 
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eoo |'j Exemplo de títulos x e 


e Œ | [5 localhost/-keizo/html/public html/titulos.html wt da = 


|h3 877px x 22px 


Título 5 


Título 6 


x | Elements | Resources Network Sources Timeline Profiles Audits Console 


Styles| Computed Event Listeners » 
element.style { + TR te 


wv «html lang="pt-br"> 
> <head>..</head> 
Y <body> | 
<hl>Título 1«/hi» h3 ( user agent stylesheet 
<h2>Titulo 2</h2> display: block; 
font-size: 1.17em; 
<h4>Titulo 4</h4> -webkit-margin-before: lem; 
<h5>Título 5</h5> -webkit-margin-after: lem; 
<h6>Titulo 6</h6> -webkit-margin-start: Opx; 
</body> -webkit-margin-end: px; 
</html> font-weight: bold; 


Figura 2.15: Exemplo de titulos 


Geralmente, os navegadores utilizam tamanhos diferentes de fonte para cada titulo. Nao existe 
um padráo de tamanho e de fonte entre os navegadores. Em outras palavras, os títulos de uma página 
web podem ser exibidos de maneiras diferentes em navegadores distintos. Para padronizar a exibição 
dos títulos, podemos aplicar as regras CSS. 


Devemos utilizar os títulos com cautela, pois eles sáo usados como critério de ranqueamento 
por buscadores como Google, Yahoo e Bing. O uso correto dos elementos de título é fortemente re- 
comendado pelos especialistas em SEO (Search Engine Optimization). Para utilizá-los corretamente, 
devemos respeitar basicamente as seguintes regras. 


* Manter a ordem lógica dos títulos. Um elemento h2 deve ser precedido de um elemento hl. 
Um elemento h3 deve ser precedido de um elemento h2. E assim sucessivamente. 


* Otítulo de uma secáo deve descrever bem o contetido dela. 


a Exercícios de Fixacáo 


(6) Crie um novo documento HTML chamado titulos.html com o conteúdo abaixo no projeto html 
em Site Root. 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 


AUN- 
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5 <title>K02 - Desenvolvimento Web com HTML, CSS e Javascript</title> 
6 </head> 

T <body> 

8 <h1>K02 - Desenvolvimento Web com HTML, CSS e Javascript</h1> 

9 

10 <p>Atualmente, praticamente todos os sistemas corporativos possuem 
11 interfaces web. Para quem deseja atuar no mercado de desenvolvimento 
12 de software, é obrigatório o conhecimento das linguagens: HTML, CSS 
13 e JavaScript.</p> 

14 

15 <p>Essas linguagens são utilizadas para o desenvolvimento da camada de 
16 apresentação das aplicações web.</p> 

17 

18 <h2>Pré-requisitos</h2> 

19 

20 <ul> 

21 <li>Familiaridade com algum sistema operacional (Windows/Linux/Mac OS X)«/li» 
22 «li»Lógica de programação</li> 

23 «/ul» 

24 

25 <h2>Agenda</h2> 

26 

27 <h3>Aos domingos</h3> 

28 

29 <ul> 

30 <1i>10/11/2013 das 08:00 às 14:00«/1li» 

31 <li>23/02/2014 das 14:00 às 20:00«/1li» 

32 «/ul» 

33 

34 <h3>Aos sabados</h3> 

35 

36 <ul> 

37 «1i»15/03/2014 das 08:00 às 14:00«/1li» 

38 «1i»26/04/2014 das 14:00 às 20:00«/1li» 

39 «/ul» 

40 «/body» 

41 |</html> 


Código HTML 2.20: titulos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao6.zip 


© No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/titulos.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/html/public html/titulos.html. 


Utilize o Chrome DevTools ou o Firebug para analisar os elementos que formam o documento 
HTML, a requisição HTTP e a resposta HTTP 


(8) Imagine que você possua um site de culinária no qual você disponibiliza algumas receitas. Crie 
uma página com uma receita fictícia utilizando títulos para organizar conteúdo. Utilize quantos ní- 
veis de título achar necessário. Para isso, adicione um arquivo chamado receita.html no projeto 
html em Site Root. 


1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
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4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Como preparar um delicioso macarrão instantáneo em 6 min.</title> 
6 </head> 

7 <body> 

8 <h1>Como preparar um delicioso macarrão instantáneo em 6 min.</h1> 
9 

10 <p>Com esta receita vocé se tornará um profissional na arte de 

11 preparar um macarrão instantâneo.</p> 

12 

13 <h2>Ingredientes</h2> 

14 

15 <ul> 

16 <li>Macarrão instantáneo da sua marca favorita</li> 

17 <1i>600ml de água</li> 

18 </ul> 

19 

20 <h2>Modo de preparo</h2> 

21 

22 <h3>No micro-ondas</h3> 

23 

24 <p>Coloque o macarrão instantâneo em um recipiente com 600ml de água e 
25 programe o micro ondas para 6 minutos. Aperte o botão iniciar ou 
26 equivalente.</p> 

27 

28 <h4>Dicas</h4> 

29 

30 <ul> 

31 <li> 

32 Utilize um recipiente que permita o macarrão ficar totalmente 
33 submerso na água. 

34 eiie 

35 «i 

36 Quando ouvir o bip, não saia correndo. O micro ondas nào explodirá. 
37 O bip significa que o macarráo está pronto. 

38 sunm 

39 «/ul» 

40 

41 <h3>No fogão</h3> 

42 

43 <p> 

44 Coloque o macarráo instantáneo em uma panela com 600ml de agua e 
45 leve ao fogo por 3 minutos. 

46 </p> 

47 

48 <h4>Dicas</h4> 

49 

50 <ul> 

51 <li> 

52 Utilize uma panela que permita o macarrão ficar totalmente 

53 submerso na água. 

54 «/li» 

55 «li» 

56 Não se distraia com a televisão ou qualquer outra coisa. 

57 Você poderá queimar a sua refeição 

58 Sm 

59 «/ul» 

60 </body> 

61 |</html> 


Código HTML 2.21: receita.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao8.zip 


O No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/html/public html/receita.html. 
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No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/~<USUARIO>/htm1/public_html/receita. html. 


Utilize o Chrome DevTools ou o Firebug para analisar os elementos que formam o documento 
HTML, a requisicáo HTTP e a resposta HTTP. 


‘© Parágrafos 


Os parágrafos de uma página web são definidos através do elemento p. Assim como os títulos, 
normalmente, os navegadores definem os parágrafos como block-level elements. Dessa forma, por 
padráo, eles ocupam horizontalmente todo o espaco do elemento pai. 


Os navegadores ajustam os textos dos parágrafos à largura do elemento pai. As quebras de linha 
necessárias sáo inseridas automaticamente. Os espacos excedentes definidos em um documento 
HTML entre as palavras de um parágrafo são desconsiderados pelos navegadores na exibição das 
páginas web. Analogamente, as quebras de linha presentes no documento HTML também são des- 
consideradas pelos navegadores. 


Caso seja necessário forcar uma quebra de linha entre duas palavras contidas em um parágrafo, 
podemos utilizar o elemento br. Quando um parágrafo contém palavras muito longas, os navegado- 
res podem ter dificuldades para ajustar as quebras de linha. Podemos indicar explicitamente com o 
elemento wbr, como as palavras podem ser "quebradas". Veja o exemplo abaixo. 


1 «!DOCTYPE html» 

2 |<html lang="pt-br”> 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Exemplo de parágrafos</title> 

6 </head> 

7 <body> 

8 <h1>Exemplo de parágrafos</h1> 

9 <p> 

10 Este parágrafo serve para demonstrar a inserção 
1 automática das quebras de linha. 

12 

13 Observe também que os espaços excedentes contidos 
14 no documento HTML entre as palavras 

15 desse parágrafo são desconsiderados 

16 

17 

18 na exibição da página web. 

19 

20 As quebras de linha também são 

21 desconsideradas. O navegador ajusta o texto 
22 desse paragrafo ao espaço horizontal do 
23 corpo dá página. 

24 </p> 

25 

26 <p> 

27 Neste parágrafo mostramos a inserção de uma quebra de linha forçada. 
28 <br>Percebeu?|<br>Além disso, podemos indicar ao navegador como quebrar 
29 palavra otorrino[XwbrJlaringo[£wbr5logista otorrino(<wbralaringo[<wbralogista 
30 otorrino[«wbr»laringo[«wbr»]logista otorrino[«wbr»laringo[«wbr»]logista 

31 otorrino(«wbr»|laringo[«wbr»]logista otorrino[s«wbr»]laringo[swbr»]logista 
32 otorrino[«wbr»]laringo[«wbr»]logista otorrino{<wbr>laringo{<wbr>logista 
33 otorrino(«wbr»|laringo[«wbr»logista. 

34 </p> 

35 </body> 

36 |</html> 
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Código HTML 2.22: Exemplo de parágrafos 


By 


eoo Exemplo de parágrafos x 


€ > Œ D localhost/-keizo/html/public. html/p.html arte e 


Exemplo de parágrafos 


Este parágrafo serve para demonstrar a inserção automática das quebras de linha. Observe também que os espaços 
excedentes contidos no documento HTML entre as palavras desse parágrafo são desconsiderados na exibição da página 
web. As quebras de linha também são desconsideradas. O navegador ajusta o texto desse parágrafo ao espaço horizontal 
do corpo dá página. 


Neste parágrafo mostramos a inserção de uma quebra de linha forçada. 

Percebeu? 

Além disso, podemos indicar ao navegador como quebrar palavra otorrinolaringologista otorrinolaringologista otorrino 
laringologista otorrinolaringologista otorrinolaringologista otorrinolaringologista otorrinolaringologista otorrinolaringo 
logista otorrinolaringologista 


Figura 2.16: Exemplo de parágrafos 


‘© Character Entities 


muy 5 —N — 
SU 4C. HH OW AN AUN PWD — 


Para inserir determinados caracteres em um documento HTML, devemos utilizar o código do 
caractere desejado. A utilização desses códigos evita problemas de encoding na exibição das páginas 
web. Você pode conhecer esses caracteres e os seus respectivos códigos através do seguinte endereço 
http://dev.w3.0rg/html5/html-author/charref. Esses caracteres são conhecidos como Charac- 
ter Entities ou HTML Entities. Veja o exemplo a seguir. 


<!DOCTYPE html» 


shtml la 
<head> 


ng-z"pt-br"» 


«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 


<tit 
</head 
<body> 
<h1> 
<ul> 
«1 

«1 

<1 

<1 
</ul 
</body 

</html> 


le>Exemplo de character entities</title> 
> 


Exemplo de character entities</h1> 


i»(&starf;) &bigstar ;] [84x02605;] [849733;]«/1i» 


i>&phone;) (&#x0260E ;] [&49742;]«/1i» 
i>&female;] (&#x02640 5] [&9792;)«/1i» 
i>(&sung ;] (&#x0266A;] [849834;)</1i> 

> 

> 


Cédigo HTML 2.23: Exemplo de character entities 
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40 


A 
eoo Exemplo de character ent x Li 


€ 3 CQC [3 localhost/-keizo/html/public html/character-entities.html Q2 & de $ = 


Exemplo de character entities 


ok kkk 
naa 
42929 
2225 


Figura 2.17: Exemplo de character entities 


(> Exercícios de Fixacáo 


O Crie um novo documento HTML chamado paragrafos.html no projeto html em Site Root. 


1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de parágrafos</title> 
6 </head> 
7 <body> 
8 <h1>Exemplo de parágrafos</h1> 
9 <p> 
10 Este parágrafo serve para demonstrar a inserção 
11 automatica das quebras de linha. 
12 
13 Observe também que os espaços excedentes contidos 
14 no documento HTML entre as palavras 
15 desse parágrafo são desconsiderados 
16 
17 
18 na exibição da página web. 
19 
20 As quebras de linha também são 
21 desconsideradas. O navegador ajusta o texto 
22 desse parágrafo ao espaço horizontal do 
23 corpo dá página. 
24 </p> 
25 
26 <p> 
27 Neste parágrafo mostramos a inserção de uma quebra de linha forçada. 
28 <br>Percebeu?<br>Além disso, podemos indicar ao navegador como quebrar 
29 palavra otorrino<wbr>laringo<wbr>logista otorrino<wbr>laringo<wbr/logista 
30 otorrino<wbr>laringo<wbr>logista otorrino<wbr>laringo<wbr>logista 
31 otorrino<wbr>laringo<wbr>logista otorrino<wbr>laringo<wbr>logista 
32 otorrino<wbr>laringo<wbr>logista otorrino<wbr>laringo<wbr>logista 
33 otorrino<wbr>laringo<wbr>logista. 
34 </p> 
35 </body> 
36 «/html» 
Cédigo HTML 2.24: paragrafos.html 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao10.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/html/public. html/paragrafos.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/paragrafos.html. 


(12) Crie um novo documento HTML chamado character-entities.html no projeto html em Site 


Root. 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de character entities</title> 
</head> 
<body> 
<h1>Exemplo de character entities</h1> 
<ul> 
<li>&starf; &bigstar; &#x02605; &#9733;</li> 
<li>&phone; &#x0260E; &#9742; </li> 
<li>&female; &#x02640; 849792;«/li» 
<li>&sung; 84x0266A; &#9834;</li> 
</ul> 
</body> 
</html> 


aaa aaa a 
SUB UWwUNAO O AN AN FWHNH = 


Código HTML 2.25: character-entities.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao12.zip 
(13) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/character-entities.html. 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/character-entities.html. 


‘© Texto 


Texto pré-formatado 


Como vimos, os navegadores desconsideram os espacos excedentes entre as palavras contidas 
em um documento HTML assim como desconsideram as quebras de linha. Contudo, é possivel in- 
serir texto formatado com quantos espacos e quebras de linha desejarmos através do elemento pre. 
O texto contido no contetido de um elemento pre é exibido com todos os espacos e quebras de linha 
inseridos no documento HTML. Além disso, os navegadores costumam utilizar fonte mono espaçada 


para mostrar esse texto. 
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Assim como os títulos e os parágrafos, normalmente, os navegadores definem os textos pré- 
formatados como block-level element. Dessa forma, por padrão, eles ocupam todo o espaço ho- 
rizontal do elemento pai. 


1 |«! DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de texto pré-formatado</title> 
6 </head> 
7 <body> 
8 <h1>Exemplo de texto pré-formatado</h1> 
9 <pre> 
10 |Os espaços excedentes são considerados pelos 
11 |navegadores. Assim como as 
12 
13 |quebras 
14 
15 |de 
16 
17 |linha. Observe também o tipo de fonte utilizada nesse texto. 
18 </pre> 
19 </body> 
20 «/html» 
Código HTML 2.26: Exemplo de texto pré-formatado 
|e 98 Exemplo de texto pré-for X 4 Sa £z 
€ 3 CQC (5 localhost/-keizo/html/public html/pre.html Att & e = 
^ 
Exemplo de texto pré-formatado 
Os espaços excentes são considerados pelos 
navegadores. Assim como as 
quebras 
de 
linha. Observe também o tipo de fonte utilizada nesse texto. 
Figura 2.18: Exemplo de texto pré-formatado 
Código 


Para adicionar códigos em um documento HTML, devemos utilizar o elemento code. Normal- 
mente, esse elemento é utilizado para definir códigos escritos em alguma linguagem de programa- 
ção. Normalmente, os navegadores utilizam fonte mono espaçada para exibir o conteúdo desse ele- 
mento. 


Diferentemente dos títulos, dos parágrafos e dos textos pré-formatados, normalmente, os na- 
vegadores definem os códigos como inline-level elements. Dessa forma, por padrão, os códigos 
ocupam horizontalmente somente o espaço necessário. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
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5 <title>Exemplo de códigos</title> 
6 </head> 

7 <body> 

8 <h1>Exemplo de códigos</h1> 


9 <p> 
10 Em Java, utilizamos o código |<code>System.out.printin("K19");</code>|. 
11 Em C£, utilizamos o código [<code>System.Console.WriteLine("K19");</code>. 
12 </p> 
13 </body> 
14 «/html» 
Código HTML 2.27: Exemplo de código 
eoo Exemplo de códigos x W 4 w^ 
€ 3 C' [3 localhost/-keizo/html/public html/code.html Ade & E += 
Ed e 
Exemplo de cédigos 


Em Java, utilizamos o código system. out.print1n("k19");. Em C£, utilizamos o código 
System.Console.WriteLine("K19");. 


Figura 2.19: Exemplo de código 


Elemento i 


A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do ele- 
mento i. Ela indica a utilização desse elemento para definir nomes científicos, termos técnicos, ex- 
pressões idiomáticas em outras línguas, transliterações, pensamentos. Normalmente, os navegado- 
res definem o i como inline-level element e exibem o seu conteúdo em itálico. 


<!DOCTYPE html> 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de utilização do elemento i</title> 
</head> 
<body> 
<h1>Exemplo de utilização do elemento i</h1> 
<ul> 


<li>Porquinho-da-india ou |<i>Cavia porcellus</i </li> 
<li>(<i>Backup</i> (copia de segurança)</li> 


<li>xi>shoot the breeze</i>(bater papo ou jogar conversa fora)</li> 
<li>{<i>Moskva</i>(transliteracdo da palavra Moscou em russo)«/li» 
<li>[<i>Se não sabes, aprende; se ja sabes, ensina.</i>] (Confücio)«/li» 
«/ul» 
</body> 
</html> 


=a 2 QM E 
NOonPWN HH CWO ANA UN HPWDHDY >=> 


Código HTML 2.28: Exemplo de utilização do elemento i 
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eoo j | Exemplo de utilização do. X + ^ | 
e Œ D localhost/-keizo/html/public html/i.html ak w$ e = 
| Exemplo de utilização do elemento i 
* Porquinho-da-índia ou Cavia porcellus 
* Backup(cópia de segurança) 
* shoot the breeze(bater papo ou jogar conversa fora) 
e Moskvá(transliteração da palavra Moscou em russo) 
* Se não sabes, aprende; se já sabes, ensina. (Confúcio) 
Figura 2.20: Exemplo de utilização do elemento i 
Elemento b 


A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do ele- 


mento b. Ela indica, por exemplo, a utilização desse elemento para definir as palavras chave do re- 
sumo de um documento e o nome do produto em texto de avaliação. Normalmente, os navegadores 
definem o b como inline-level element e exibem o conteúdo em negrito. 


E, a Sa q x 
UU BWwUN+AOULOJOURwnNa 


<!DOCTYPE html> 
<html langz"pt-br"» 
<head> 


</head> 
<body> 


«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de utilização do elemento b</title> 


<h1>Exemplo de utilização do elemento b</h1> 

<p> 
Atualmente, praticamente todos os [£b>sistemas corporativos</b> 
possuem [<b>interfaces web</b>) Para quem deseja atuar no mercado 
de |£b>desenvolvimento de software</b>| é obrigatório o conhecimento 
das linguagens: [<b>HTML</b>), [<b>CSS</b>] e [<b>JavaScript</b>. 


</p> 
</body> 
</html> 
Código HTML 2.29: Exemplo de utilização do elemento b 
eoo , | Exemplo de utilização do: X \ x" 
€ CŒ | D localhost/-keizo/html/public html/b.html ar% da = 


Exemplo de utilização do elemento b 


Atualmente, praticamente todos os sistemas corporativos possuem interfaces web. Para quem deseja atuar no mercado 
de desenvolvimento de software, é obrigatório o conhecimento das linguagens: HTML, CSS e JavaScript. 


Figura 2.21: Exemplo de utilização do elemento b 
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Texto subscrito ou sobrescrito 


Podemos definir textos subscrito ou sobrescrito com os elementos sub e sup respectivamente. 


Normalmente, os navegadores definem esses elementos como inline-level elements. 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de texto subscrito ou sobrescrito</title> 
</head> 
<body> 
<h1>Exemplo de texto subscrito ou sobrescrito</h1> 
<p> 
A cidade de São Paulo possui uma área de 1.523 kmxsup>2</sup)>. 
Em 2011, São Paulo emitiu 16,430 milhões de toneladas de 
Co sub»247 sub»). 
</p> 
</body> 
</html> 


mk mA md em, et ved 
EwUNAÃO UC OURwN 


Código HTML 2.30: Exemplo de texto subscrito ou sobrescrito 


eoo Exemplo de texto subscrit x Li 


€ C | D localhost/-keizo/html/public html/sub-sup.html Qe & $ * 


Exemplo de texto subscrito ou sobrescrito 


A cidade de Sáo Paulo possui uma área de 1.523 km?, Em 2011, São Paulo emitiu 16,430 milhões de toneladas de CO). 


Figura 2.22: Exemplo de texto subscrito ou sobrescrito 


Texto importante ou enfatizado 


Podemos definir textos importantes ou enfatizados com os elementos strong e em respectiva- 
mente. Por padráo, nos navegadores, o contetido de um elemento strong é exibido em negrito e o 
conteüdo de um elemento em é exibido em itálico. Normalmente, os navegadores definem esses 


elementos como inline-level elements. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de texto importante ou enfatizado</title> 
</head> 
<body> 
<hi>Exemplo de texto importante ou enfatizado</h1> 
<p> 
O |Xstrong>Brasil</strong> é o único 
país que ganhou |<xem>cinco vezes</em> 
a |<strong>copa do mundo de futebol</strong>. 
</p> 
</body> 
</html> 


ee ee A ey 
OFWN HH COW AN AN RWHNHY = 
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Código HTML 2.31: Exemplo de texto importante ou enfatizado 


a 
eoo | Exemplo de texto import: x Li 


e C | [5 localhost/-keizo/html/public html/strong-em.html Qe & E $ = 


Exemplo de texto importante ou enfatizado 


O Brasil é o ánico país que ganhou cinco vezes a copa do mundo de futebol. 


Figura 2.23: Exemplo de texto importante ou enfatizado 


Citações 


Podemos definir citações longas ou curtas com os elementos blockquote e q respectivamente. 
Por padrão, o elemento blockquote é exibido como elemento de bloco e o elemento q é exibido 
como elemento de linha. Esses dois elementos possuem o atributo cite que deve ser utilizado para 
indicar a fonte da citação. 


Também podemos citar, com o elemento cite, títulos de trabalhos, livros, músicas, filmes, pro- 
gramas de TV, peças de teatro, entre outros. Por padrão, esse elemento é exibido como elemento de 
linha. 


Normalmente, os navegadores definem o blockquote como block-level element. Por outro lado, 
o q e o cite, normalmente, são definidos como inline-level elements. 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de citações</title> 
</head> 
<body> 
<h1>Exemplo de citações</h1> 
<blockquote cite="http://en.wikipedia.org/wiki/Computer "> 
<p> 
A computer is a general purpose device that can be programmed 
to carry out a set of arithmetic or logical operations. Since a 
sequence of operations can be readily changed, the computer 
can solve more than one kind of problem. 
</p> 


<p> 
Conventionally, a computer consists of at least one processing 
element, typically a central processing unit (CPU) and some form 


EM Ilo 
OANA TFWNH HCHO AN DAO 3 00 N20 — 


20 of memory. The processing element carries out arithmetic and 

21 logic operations, and a sequencing and control unit that can 

22 change the order of operations based on stored information. 

23 Peripheral devices allow information to be retrieved from an 

24 external source, and the result of operations saved and retrieved. 

25 </p> 

26 </blockquote> 

27 
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28 <p> 
29 Nelson Rodrigues disse: 
30 <q cite="http://pt.wikipedia.org/wiki/Nelson Rodrigues"> ] 
31 O adulto não existe. O homem é um menino perene 
32 </q>. 
33 </p> 
34 
35 <p> 
36 A peça [<cite>A mulher sem pecado</cite>) de Nelson Rodrigues estreou 
37 em 1941 no Rio de Janeiro. 
38 </p> 
39 </body> 
40 |</html> 
Código HTML 2.32: Exemplo de citações 
eoo y | Exemplo de citações x VE e 
e C | D localhost/-keizo/html/public html/blockquote-q-cite.html Q2 & E += 
. ~ 
Exemplo de citacóes 
A computer is a general purpose device that can be programmed to carry out a set of arithmetic or logical 
operations. Since a sequence of operations can be readily changed, the computer can solve more than one 
kind of problem. 
Conventionally, a computer consists of at least one processing element, typically a central processing unit 
(CPU) and some form of memory. The processing element carries out arithmetic and logic operations, and a 
sequencing and control unit that can change the order of operations based on stored information. Peripheral 
devices allow information to be retrieved from an external source, and the result of operations saved and 
retrieved. 
Nelson Rodrigues disse: " O adulto nào existe. O homem é um menino perene ". 
A peça A mulher sem pecado de Nelson Rodrigues estreiou em 1941 no Rio de Janciro. 
Figura 2.24: Exemplo de citações 
Abreviações 


Podemos definir abreviações com o elemento abbr. Por padrão, esse elemento é exibido como 


elemento de linha. O atributo title desse elemento é utilizado para definir um tootip. Normalmente, 
os navegadores definem esse elemento como inline-level element 


= 24 EE 
PWN HOW AN AN FWHN = 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 


«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de abreviações</title> 


</head> 
<body> 


<h1>Exemplo de abreviações</h1> 
<p> 

O [<abbr title-"Instituto de Matemática e Estatistica”>IME</abbr>] é 

uma das unidades da [<abbr title="Universidade de São Paulo">USP</abbr). 
</p> 


</body> 
</html> 


Código HTML 2.33: Exemplo de abreviações 
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000 ; | | Exemplo de abreviações x \ 


€ > Q (5 localhost/-keizo/html/public html/abbr.html 


Exemplo de abreviações 


O IME é uma das unidades da USP. 


Figura 2.25: Exemplo de abreviações 


Definições 


Podemos inserir definições em um documento HTML com o elemento dfn. Por padrão, esse 
elemento é exibido como elemento de linha. Normalmente, os navegadores definem o dfn como 
inline-level element 


SUDOCTYPE html 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de definições</title> 
</head> 
<body> 
<h1>Exemplo de definições</h1> 
<p> 
Um |xdfn>pingado</dfn>] é um copo de café com um pouco de leite.<br> 
Uma [<dfn>bomba de chocolate</dfn> é um doce de padaria feito com 
massa de farinha de trigo com recheio cremoso e cobertura de chocolate. 


=, Ed, zx x zd cx 
OFPWNH- DOAN DUO FWY => 


</p> 
</body> 
</html> 
Código HTML 2.34: Exemplo de definições 
eoo y | | Exemplo de definições x Ny e 
€ > C [5 localhost/-keizo/html/public html/dfn.html ar eee = 


Exemplo de definições 


Um pingado é um copo de café com um pouco de leite. 
Uma bomba de chocolate é um doce de padaria feito com massa de farinha de trigo com recheio cremoso e cobertura de 
chocolate. 


Figura 2.26: Exemplo de definições 
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Alterações 


Em alguns casos, é importante informar que o texto de um documento HTML sofreu alterações. 
Um texto que foi acrescentado em um documento HTML deve ser definido com o elemento ins. 
Um texto que não faz mais parte do documento deve ser definido com o elemento del. Um texto 
que deixou de ser correto, preciso ou relevante deve ser definido com o elemento s. Por padrão, 
esses elementos são exibidos como elementos de linha. Normalmente, os navegadores definem esses 


elementos como inline-level elements. 


SUDOCTYPE html 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de alterações</title> 
</head> 
<body> 
<h1>Exemplo de alterações</h1> 
<p> 
Natal é a capital do Rio Grande do Norte. |<ins>Sua fundação foi 
em 25 de dezembro de 1599.</ins>)[<del>A área total dessa cidade é) 
167,263 km<sup>2</sup></del>. [<s>De acordo com o IBGE, a população 
dessa cidade é de 774.230 habitantes.</s>|De acordo com o IBGE a 


população dessa cidade é de 803.739 habitantes. 


m» EX ca cu coc 
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</p> 
</body> 
</html> 
Código HTML 2.35: Exemplo de alterações 
eoo Exemplo de alteracóes x \ Y x" 
€ Œ | [5 localhost/-keizo/html/public html/ins-del-s.html At d+ = 


Exemplo de alterações 


Natal é a capital do Rio Grande do Norte. Sua fundação] foi em 25 de dezembro de. 1599. A -drea total dessa cidade-€ 


467.2634". e-acorde-e sean es: De acordo com o IBGE a 
população dessa disks é de 803. 739 habdtnies. 


Figura 2.27: Exemplo de alterações 


Os elementos ins e del possuem os atributos cite e datetime. O atributo cite deve ser utilizado 
para indicar a URL de um documento com as justificativas da alteração. O atributo datetime deve 


ser utilizado para informar quando ocorreu a alteração. 


Natal é a capital do Rio Grande do Norte. «ins [cite="ins-explicacao. html” 
datetime-"2013-10-15T22:55:03Z"PSua fundação foi em 25 de dezembro de 


1 [SIHEDOCTYPE html 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de alterações</title> 
6 </head> 

T <body> 

8 <h1>Exemplo de alterações</h1> 

9 <p> 

0 

1 


= 


29) KIS www.facebook.com/k1 9treinamentos 


49 


HTML 


50 


12 1599.</ins> «del (cite="del-explicacao.html"| (datetime="2013-10-10117:43:07Z"|>A 
13 área total dessa cidade é 167,263 km<sup>2</sup></del>. <s>De acordo com o 
14 IBGE, a população dessa cidade é de 774.230 habitantes.</s> De acordo com o 
15 IBGE a população dessa cidade é de 803.739 habitantes. 
16 </p> 
17 </body> 
18 «/html» 
Código HTML 2.36: Exemplo de alterações 
Data e hora 


O elemento time permite que datas e horários sejam definidos em um documento HTML. Há 
duas formas de utilizar esse elemento. A primeira é definir a data e o horário desejado no con- 
teúdo do elemento time. A segunda é definir a data e o horário desejado no valor do atributo date- 
time. Nessas duas opções, as datas e os horários devem ser escritos seguindo o formato definido na 
especificação da linguagem HTML (http: //www.w3.org/TR/htm15/text-level-semantics.html# 
the-time-element). Quando utilizamos o atributo datetime, o conteúdo do elemento time não pre- 
cisa seguir um formato específico. Normalmente, os navegadores definem o time como inline-level 


element. 
1 |<!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de datas e horas</title> 
6 </head> 
7 <body> 
8 <h1t>Exemplo de datas e horas</h1> 
9 <ul> 
10 <li>|<time>2010-08</time>\</1li> 
11 <1li>[<time>1984-10-30</time </li> 
12 «li»[£time212-25«/time»k/li» 
13 <li><time>09:00</time></1i> 
14 <li>£time>2013-12-25 23:59</timeJ</1i> 
15 <li><time datetime="2010-08">Fundação da K19</time></li> 
16 <li>Xtime datetime="1984-10-30">Aniversário do Rafael</time></1li> 
17 <li><time datetime="12-25">Natal</time></1li> 
18 «li»[£time datetime="09:00">Horário de Entrada</timeJ</li> 
19 «li»[£time datetime-"2013-12-31 23:59:59">Ano Novo 2014</time>ķ/li> 
20 «/ul» 
21 </body> 
22 |</html> 
Cédigo HTML 2.37: Exemplo de datas e horas 
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eoo / | | Exemplo de datas e horas x |. \ x 


€ > Q (5 localhost/-keizo/html/public html/time.html ar gee = 


Exemplo de datas e horas 


Fundação da K19 
Aniversário do Rafael 
Natal 

Horário de Entrada 
Ano Novo 2014 


Figura 2.28: Exemplo de datas e horas 


Texto marcado 


O elemento mark permite que determinados trechos de um texto sejam marcados. 


mente, os navegadores definem o mark como inline-level element. 


Normal- 


SUDOCTYPE html 
«html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de texto marcado</title> 
</head> 
<body> 
<hi>Exemplo de texto marcado</h1> 
<p> 
<mark>Java</mark>) e (<mark>C#</mark>] são linguagens de programação 
<mark>orientadas a objeto</mark>). 
</p> 
</body> 
</html> 


a ei ve imde ndi) 
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Código HTML 2.38: Exemplo de texto marcado 


/ |] Exemplo de texto marcado X | 


€ > Œ  [localhost/-keizo/html/public html/mark.html 


Exemplo de texto marcado 


Java c Cif são linguagens de programação orientadas a objeto. 


Figura 2.29: Exemplo de texto marcado 
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[2 Exercícios de Fixacáo 


o Crie um novo documento HTML chamado texto-pre-formatado.html no projeto html em Site 
Root. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de texto pré-formatado</title> 

6 </head> 

7 <body> 

8 <h1>Exemplo de texto pré-formatado</h1> 

9 <pre> 

10 Os espaços excedentes são considerados pelos 
11 |navegadores. Assim como as 

12 

13 |quebras 

14 

15 |de 

16 

17 |linha. Observe também o tipo de fonte utilizada nesse texto. 
18 </pre> 

19 </body> 

20 «/html» 


Código HTML 2.39: texto-pre-formatado.html 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao14.zip 


© No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/texto-pre-formatado.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/texto-pre-formatado.html 


O Crie um novo documento HTML chamado codigo.html no projeto html em Site Root. 


<!DOCTYPE html> 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de códigos</title> 
</head> 
<body> 
<h1>Exemplo de códigos</h1> 
<p> 
Em Java, utilizamos o código <code>System.out.println("K19");</code> 
Em C£, utilizamos o código «code»System.Console.WriteLine("K19");«/code» 
</p> 
</body> 
</html> 
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Cédigo HTML 2.40: codigo.html 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao16.zip 


@ No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/html/public. html/codigo.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/codigo.html 


O Crie um novo documento HTML chamado i.html no projeto html em Site Root. 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de utilização do elemento i</title> 
</head> 
<body> 
<h1>Exemplo de utilização do elemento i</h1> 
<ul> 
«li»Porquinho-da-índia ou <i>Cavia porcellus</i></1li> 
<li><i>Backup</i>(cópia de segurança)</li> 
<li><i>shoot the breeze</i>(bater papo ou jogar conversa fora)</li> 
<li><i>Moskvá</i>(transliteração da palavra Moscou em russo)</li> 
<li><i>Se não sabes, aprende; se já sabes, ensina.</i> (Confúcio)</li> 
</ul> 
</body> 
</html> 


eu xs zd uA ad cA xd 
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Código HTML 2.41: i.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao18.zip 


(19) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/i.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/i.html 


(20) Crie um novo documento HTML chamado b.html no projeto html em Site Root. 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de utilização do elemento b</title> 
</head> 
<body> 
<h1>Exemplo de utilização do elemento b</h1> 
<p> 
Atualmente, praticamente todos os <b>sistemas corporativos</b> 
possuem <b>interfaces web</b>. Para quem deseja atuar no mercado 
de <b>desenvolvimento de software</b>, é obrigatório o conhecimento 
das linguagens: <b>HTML</b>, <b>CSS</b> e <b>JavaScript</b>. 
</p> 


Ne ee cà | 
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15| </body> 
16 |</html> 


Código HTML 2.42: b.html 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao20.zip 


(21) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/b.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/b.html 


e Crie um novo documento HTML chamado texto-subscrito-sobrescrito.html no projeto html 
em Site Root. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de texto subscrito ou sobrescrito</title> 
</head> 
<body> 
«hi»Exemplo de texto subscrito ou sobrescrito</h1> 
<p> 
A cidade de São Paulo possui uma área de 1.523 km<sup>2</sup>. 
Em 2011, São Paulo emitiu 16,430 milhões de toneladas de 
CO<sub>2</sub>. 
</p> 
</body> 
</html> 
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Cédigo HTML 2.43: texto-subscrito-sobrescrito.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao22.zip 


(23) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public_html/texto-subscrito-sobrescrito.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/html/public_html/texto-subscrito-sobrescrito.html. 


o Crie um novo documento HTML chamado texto-importante-enfatizado.html no projeto html 
em Site Root. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Exemplo de texto importante ou enfatizado</title> 

6 </head> 

7 <body> 

8 «hi»Exemplo de texto importante ou enfatizado</h1> 
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9 <p> 

10 O <strong>Brasil</strong> é o Unico 

11 país que ganhou <em>cinco vezes</em> 

12 a <strong>copa do mundo de futebol</strong>. 
13 </p> 

14 </body> 

15 «/html» 


Código HTML 2.44: texto-importante-enfatizado.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao24.zip 
(25) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/texto-importante-enfatizado.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/texto-importante-enfatizado.html. 


O Crie um novo documento HTML chamado citacoes.html no projeto html em Site Root. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de citações</title> 

6 </head> 

7 <body> 

8 <h1>Exemplo de citações</h1> 

9 <blockquote cite="http://en.wikipedia.org/wiki/Computer"> 

10 <p> 

1 A computer is a general purpose device that can be programmed 
12 to carry out a set of arithmetic or logical operations. Since a 
13 sequence of operations can be readily changed, the computer 

14 can solve more than one kind of problem. 

15 </p> 

16 

17 <p> 

18 Conventionally, a computer consists of at least one processing 
19 element, typically a central processing unit (CPU) and some form 
20 of memory. The processing element carries out arithmetic and 

21 logic operations, and a sequencing and control unit that can 

22 change the order of operations based on stored information. 

23 Peripheral devices allow information to be retrieved from an 

24 external source, and the result of operations saved and retrieved. 
25 </p> 

26 </blockquote> 

27 

28 <p> 

29 Nelson Rodrigues disse: 

30 <q cite="http://pt.wikipedia.org/wiki/Nelson Rodrigues"> 

31 O adulto não existe. O homem é um menino perene 

32 SAI 

33 </p> 

34 

35 <p> 

36 A pega <cite>A mulher sem pecado</cite> de Nelson Rodrigues estreou 
37 em 1941 no Rio de Janeiro. 

38 </p> 

39 </body> 

40 |</html> 


Código HTML 2.45: citacoes.html 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao26.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/citacoes.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/citacoes.html. 


(28) Crie um novo documento HTML chamado abreviacoes.html no projeto html em Site Root. 


1 |«! DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de abreviações</title> 

6 </head> 

7 <body> 

8 <h1>Exemplo de abreviações</h1> 

9 <p> 

10 O <abbr title="Instituto de Matemática e Estatistica”>IME</abbr> é 
1 uma das unidades da <abbr title="Universidade de São Paulo">USP</abbr>. 
12 </p> 

13 </body> 

14 |</html> 


Código HTML 2.46: abreviacoes.html 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao28.zip 


(29) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public_html/abreviacoes.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public. html/abreviacoes.html 


© Crie um novo documento HTML chamado definicoes.html no projeto html em Site Root. 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de definições</title> 
</head> 
<body> 
<h1>Exemplo de definições</h1> 
<p> 
Um <dfn>pingado</dfn> é um copo de café com um pouco de leite.<br> 
Uma <dfn>bomba de chocolate</dfn> é um doce de padaria feito com 
massa de farinha de trigo com recheio cremoso e cobertura de chocolate. 
</p> 
</body> 
</html> 
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Código HTML 2.47: definicoes.html 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao30.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/definicoes.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/definicoes.html. 


(32) Crie um novo documento HTML chamado alteracoes.html no projeto html em Site Root. 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de alterações</title> 
</head> 
<body> 
<h1>Exemplo de alterações</h1> 
<p> 
Natal é a capital do Rio Grande do Norte. <ins>Sua fundação foi 
em 25 de dezembro de 1599.</ins> <del>A área total dessa cidade é 
167,263 km<sup>2</sup></del>. <s>De acordo com o IBGE, a população 
dessa cidade é de 774.230 habitantes.</s> De acordo com o IBGE a 
população dessa cidade é de 803.739 habitantes. 
</p> 
</body> 
</html> 
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Código HTML 2.48: alteracoes.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao32.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/alteracoes.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/html/public_html/alteracoes. html. 


o Crie um novo documento HTML chamado data-hora.html no projeto html em Site Root. 


<li><time>2010-08</time></1li> 
<li><time>1984-10-30</time></li> 
<li><time>12-25</time></li> 
<li><time>09:00</time></li> 
<li><time>2013-12-25 23:59</time></li> 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 <meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de datas e horas</title> 
6 </head> 

7 <body> 

8 <hi>Exemplo de datas e horas</h1> 

9 <ul> 

10 

11 

12 

13 

14 
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15 <li><time datetime="2010-08">Fundação da K19«/time»«/li» 

16 <li><time datetime="1984-10-30">Aniversário do Rafael</time></li> 
17 <li><time datetime="12-25">Natal</time></li> 

18 <li><time datetime="09:00">Horário de Entrada</time></1li> 

19 <li><time datetime="2013-12-31 23:59:59">Ano Novo 2014</time></li> 
20 </ul> 

21 </body> 

22 |</html> 


Código HTML 2.49: data-hora.html 
Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao34.zip 
o No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/data-hora.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/data-hora. html. 


O Crie um novo documento HTML chamado mark.html no projeto html em Site Root. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de texto marcado</title> 

6 </head> 

7 <body> 

8 <h1t>Exemplo de texto marcado</h1> 

9 <p> 

10 <mark>Java</mark> e <mark>C#</mark> são linguagens de programação 
11 <mark>orientadas a objeto</mark>. 

12 </p> 

13 </body> 

14 |</html> 


Código HTML 2.50: mark.html 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao36.zip 


9 No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/html/public html/mark.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/mark. html. 


‘© Listas 


A linguagem HTML define trés tipos distintos de listas. 


* Lista de descrições 
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* Lista com ordem 


* Lista sem ordem 


Lista de descrições 


Para criar uma lista de descrições, devemos utilizar o elemento dl. Essas listas são formadas 
por termos ou nomes e as suas respectivas descrições. Os termos ou nomes são definidos com o 
elemento dt. As descrições são definidas com o elemento dd. Normalmente, os navegadores definem 
todos esses elementos como block-level elements. 


<IDOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de lista de descrições</title> 
</head> 
<body> 
<h1>Exemplo de lista de descrições</h1> 
<dl> 
«dt»K01 - Lógica de Programação</dt> 
«dd» 
Conhecimentos em Lógica de Programacáo é o pré-requisito fundamental 
para que uma pessoa consiga aprender qualquer Linguagem de Programação... 
«/dd» 
<dt>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</dt> 
«dd» 
Atualmente, praticamente todos os sistemas corporativos possuem 
interfaces web. Para quem deseja atuar no mercado de desenvolvimento... 
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«/dd» 
20 <dt>K03 - SQL e Modelo Relacional</dt> 
21 «dd» 
22 Como as aplicações corporativas necessitam armazenar dados é fundamental 
23 que os desenvolvedores possuam conhecimentos sobre persistência de dados. 
24 </dd> 
25 </dl> 
26 </body> 
27 |</html> 
Código HTML 2.51: Exemplo de lista de descrições 
eoo j a x v? 
€ C | [5 localhost/-keizo/html/public html/dl-dt-dd.html Q2 & E $ = 


Exemplo de lista de descrições 


K01 - Lógica de Programação 
Conhecimentos em Lógica de Programação é o pré-requisito fundamental para que uma pessoa consiga aprender 
qualquer Linguagem de Programação... 

K02 - Desenvolvimento Web com HTML, CSS e JavaScript 
Atualmente, praticamente todos os sistemas corporativos possuem interfaces web. Para quem descja atuar no 
mercado de desenvolvimento... 

K03 - SQL e Modelo Relacional 
Como as aplicações corporativas necessitam armazenar dados é fundamental que os desenvolvedores possuam 
conhecimentos sobre persistência de dados. 


Figura 2.30: Exemplo de lista de descrições 
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Lista com ordem 


Para criar uma lista com ordem, devemos utilizar o elemento ol. Os itens de uma lista com or- 
dem sao definidos com o elemento li. Normalmente, os navegadores definem todos esses elementos 
como block-level elements. 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de lista com ordem</title> 
</head> 
<body> 
<h1>Macarrão instantáneo - K19 Receitas</h1> 
<h2>Modo de preparo</h2> 


<ol> 
<li>Ferver 600ml de água em uma panela.</li> 
<li>Retirar o macarrão do pacote.«/li» 
<li>Colocar o macarrão na panela no fogo baixo.</li> 
<li>Cozinhar o macarrão por 3min.</li> 
<li>Temperar a gosto.</li> 


wu eA. ua. zd ee, a ied 
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</ol> 
</body> 
</html> 
Código HTML 2.52: Exemplo de lista com ordem 
eoo Exemplo de lista com orde x \ | a 
€ C | D localhost/-keizo/html/public html/ol-li.html Qe $t $ $ = 


Macarrão instantâneo - K19 Receitas 


Modo de preparo 


. Ferver 600ml de água em uma panela. 

. Retirar o macarrão do pacote. 

. Colocar o macarrão na panela no fogo baixo. 
. Cozinhar o macarrão por 3min. 

. Temperar a gosto. 


AUNE 


Figura 2.31: Exemplo de lista com ordem 


Lista sem ordem 


Para criar uma lista sem ordem, devemos utilizar o elemento ul. Os itens de uma lista sem or- 
dem são definidos com o elemento li. Normalmente, os navegadores definem todos esses elementos 
como block-level elements. 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de lista sem ordem</title> 
</head> 
<body> 
<h1>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</h1> 
<h2>Pré-requisitos</h2> 


OANA FWDNY = 
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10 
11 <ul> 
12 <li>Conhecimento de algum sistema operacional (Windows/Linux/MacOS X)«/li» 
13 «li»Lógica de programação</li> 
14 </ul> 
15 </body> 
16 «/html» 
Cédigo HTML 2.53: Exemplo de lista sem ordem 
eoo / TERES ESE ord x WAY Ca 
€ > É [53 localhost/-keizo/html/public html/ul-li.html At & e = 
K02 - Desenvolvimento Web com HTML, CSS e 
JavaScript 
Pré-requisitos 
* Conhecimento de algum sistema operacional (Windows/Linux/MacOS X) 
* Lógica de programação 
Figura 2.32: Exemplo de lista sem ordem 
Listas aninhadas 


Uma lista pode ser definida dentro de outra lista. Quando listas sem ordem são aninhadas, nor- 


malmente, os navegadores alternam o marcadores dos itens. 


1 ISIUDOCTYPE menis 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de listas aninhadas</title> 
6 </head> 

7 <body> 

8 <h1>Exemplo de listas aninhadas</h1> 
9 <h2>Continentes</h2> 

10 <ul> 

1 <li> 

12 Europa 

13 <ul> 

14 <li>Portugual</li> 

15 <li>França</li> 

16 <li>Alemanha</li> 

[n «/ul» 

18 «/li» 

19 <li> 

20 Asia 

21 <ul> 

22 <li>Japão</li> 

23 <li>China</li> 

24 <li>India</li> 

25 </ul> 

26 </li> 

27 </ul> 

28 <h2>Cronograma da minha viagem</h2> 
29 <ol> 

30 eI 

31 Europa 
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32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 


«ol» 
«li»Portugual«/li» 
<li>França</li> 
<li>Alemanha</li> 

</ol> 

ARS 
<li> 

Ásia 

<ol> 
<li>Japão</li> 
<li>China</li> 
<li>India</li> 

</ol> 

anui 
</ol> 
</body> 
</html> 


Código HTML 2.54: Exemplo de listas aninhadas 


J | Exemplo de listas aninhac x +. \ 


€ > Q (5 localhost/~keizo/html/ public_html /listas-aninhadas.html 


Exemplo de listas aninhadas 


Continentes 


* Europa 

o Portugual 

o Franga 

o Alemanha 
e Ásia 

o Japão 

o China 

o Índia 


Cronograma da minha viagem 


1. Europa 

1. Portugual 

2. França 

3. Alemanha 
2. Ásia 

1. Japão 

2. China 

3. Índia 


Figura 2.33: Exemplo de lista aninhadas 


(> Exercícios de Fixacáo 


(38) Crie um novo documento HTML chamado lista-descricoes.html no projeto html em Site Root. 


1 
2 
3 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
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4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Exemplo de lista de descrições</title> 

6 </head> 

7 <body> 

8 <hi>Exemplo de lista de descrições</h1> 

9 <dl> 

10 <dt>K01 - Lógica de Programação</dt> 

11 «dd» 

12 Conhecimentos em Lógica de Programação é o pré-requisito fundamental 

13 para que uma pessoa consiga aprender qualquer Linguagem de Programacáo... 
14 «/dd» 

15 «dt»K02 - Desenvolvimento Web com HTML, CSS e JavaScript</dt> 

16 «dd» 

17 Atualmente, praticamente todos os sistemas corporativos possuem 

18 interfaces web. Para quem deseja atuar no mercado de desenvolvimento... 
19 «/dd» 

20 <dt>K03 - SQL e Modelo Relacional</dt> 

21 «dd» 

22 Como as aplicações corporativas necessitam armazenar dados é fundamental 
23 que os desenvolvedores possuam conhecimentos sobre persisténcia de dados. 
24 «/dd» 

25 «/dl» 

26 </body> 

27 «/html» 


Cédigo HTML 2.55: lista-descricoes.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao38.zip 


O No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/lista-descricoes.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/lista-descricoes.html 


O Crie um novo documento HTML chamado lista-com-ordem.html no projeto html em Site Root. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de lista com ordem</title> 

6 </head> 

7 <body> 

8 <h1>Macarrão instantáneo - K19 Receitas</h1> 

9 <h2>Modo de preparo</h2> 

10 

14 <ol> 

12 <li>Ferver 600ml de água em uma panela.</li> 

13 <li>Retirar o macarrão do pacote.«/li» 

14 <li>Colocar o macarrão na panela no fogo baixo.</li> 
15 <li>Cozinhar o macarrão por 3min.</li> 

16 <li>Temperar a gosto.</li> 

Ud </ol> 

18 </body> 

19 |</html> 


Código HTML 2.56: lista-com-ordem.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao40.zip 
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Qo No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/lista-com-ordem. html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/htm1/public_html/lista-com-ordem. html. 


© Crie um novo documento HTML chamado lista-sem-ordem.html no projeto html em Site Root. 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de lista sem ordem</title> 
</head> 
<body> 
<h1>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</h1> 
<h2>Pré-requisitos</h2> 


<ul> 
<li>Conhecimento de algum sistema operacional (Windows/Linux/MacOS X)«/li» 
«li»Lógica de programação</li> 
«/ul» 
</body> 
</html> 


EA im, casi, cá] a ed, À, 
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Código HTML 2.57: lista-sem-ordem.html 
Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao42.zip 
Qo No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public_html/lista-sem-ordem. html. 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/htm1/public_html/lista-sem-ordem. html. 


© Crie um novo documento HTML chamado listas-aninhadas.html no projeto html em Site Root. 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de listas aninhadas</title> 
</head> 
<body> 
<h1>Exemplo de listas aninhadas</h1> 
<h2>Continentes</h2> 
<ul> 
<li> 
Europa 
Sul 
«li»Portugual«/li» 
<li>França</li> 
<li>Alemanha</li> 
</ul> 
ene 
ID 


Y 


à 


à 
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20 Asia 

21 <ul> 

22 <li>Japão</li> 

23 <li>China</li> 

24 <li>India</li> 

25 </ul> 

26 </li> 

27 </ul> 

28 <h2>Cronograma da minha viagem</h2> 
29 <ol> 

30 S 

31 Europa 

32 <ol> 

33 «li»Portugual«/li» 
34 <li>França</li> 

35 <li>Alemanha</1li> 
36 </ol> 

37 </li> 

38 <a. 

39 Asia 

40 sol» 

41 <li>Japdo</li> 

42 <li>China</li> 

43 <li>India</li> 

44 </ol> 

45 </li> 

46 </ol> 

47 </body> 

48 |</html> 


Código HTML 2.58: listas-aninhadas.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao44.zip 


(45) No Windows, utilize o Chrome para acessar o endereço: 


O Crie um novo documento HTML chamado restaurante.html no projeto html em Site Root. 


à ca à aS 


à 


à 


à 
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http: //localhost/html/public html/listas-aninhadas.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/listas-aninhadas.html 


<!DOCTYPE html> 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Menu - K19 Pizzaria</title> 
</head> 
<body> 
<h1>Menu - K19 Pizzaria</h1> 


<dl> 
<dt>A moda da casa</dt> 
<dd> 
Presunto coberto com mussarela, ovos e palmito. 
</dd> 
<dt>A moda do pizzaiolo</dt> 
<dd> 
Mussarela, presunto, ovos e bacon. 
</dd> 
<dt>Aliche</dt> 
<dd> 
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21 Aliche, parmesão e rodelas de tomate. 
22 «/dd» 

23 «/dl» 

24 «/body» 

25 «/html» 


Código HTML 2.59: restaurante.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao46.zip 
@ No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/html/public. html/restaurante.html. 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/restaurante.html 


O Crie um novo documento HTML chamado manual.html no projeto html em Site Root. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>0peração de saque - Manual do caixa eletrônico - K19 Bank</title> 
6 </head> 

7 <body> 

8 <h1>0peração de saque - Manual do caixa eletrônico - K19 Bank</h1> 
9 

10 <ol> 

11 <li>Insira o cartão</li> 

12 <li>Digite a senha</li> 

13 <li>Escolha a opção de saque</li> 

14 <li>Informe o valor que deseja sacar</li> 

15 <li>Insira o cartão novamente</li> 

16 <li>Aguarde até a liberação do dinheiro</1li> 

17 </ol> 

18 </body> 

19 |</html> 


Código HTML 2.60: manual.html 
Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao48.zip 
O No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/manual.html. 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/manual.html 


o Crie um novo documento HTML chamado cursos.html no projeto html em Site Root. 


1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
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4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K00 - Formação Básica - K19 Treinamentos</title> 

6 </head> 

7 <body> 

8 <h1>K00 - Formação Básica</h1> 

9 

10 <ul> 

11 «li»K01 - Lógica de Programação</li> 

12 «li»K02 - Desenvolvimento Web com HTML, CSS e JavaScript«/li» 

13 «li»K03 - SQL e Modelo Relacional</li> 

14 «/ul» 

15 </body> 

16 |</html> 


Código HTML 2.61: cursos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao50.zip 


Qo No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/cursos.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/cursos.html 


o Crie um novo documento HTML chamado formacoes.html no projeto html em Site Root. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Formações - K19 Treinamentos</title> 

6 </head> 

7 <body> 

8 <h1>Formações - K19 Treinamentos</h1> 

9 «ul» 

10 sai 

11 KOO - Formação Básica 

12 «ul» 

13 «li»K01 - Lógica de Programação</li> 

14 «li»K02 - Desenvolvimento Web com HTML, CSS e JavaScript«/li» 
15 «li»K03 - SQL e Modelo Relacional</1li> 

16 </ul> 

17 SB 

18 Sm 

19 K10 - Formação Desenvolvedor Java 

20 sul» 

21 «li»K11 - Orientação a Objetos em Java</li> 

22 «li»K12 - Desenvolvimento Web com JSF2 e JPA2«/li» 
23 </ul> 

24 </> 

25 «IDs 

26 K30 - Formação Desenvolvedor .NET 

27 sul» 

28 «li»K31 - C# e Orientação a Objetos</li> 

29 <li>K32 - Desenvolvimento Web com ASP.NET MVC</li> 
30 </ul> 

31 Sn 

32 «/ul» 

33 </body> 

34 |</html> 


Código HTML 2.62: formacoes.html 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao52.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/html/public. html/formacoes.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/formacoes.html. 


‘© Iframes 


Um documento HTML pode conter outros documentos HTML. Para adicionar um documento 
HTML dentro de outro, devemos utilizar o elemento iframe. Esse elemento possui o atributo src. 
Esse atributo indica o caminho absoluto ou relativo de um documento HTML. O contetido do ele- 
mento iframe é utilizado pelos navegadores que nào oferecem suporte a esse elemento. Normal- 
mente, o iframe é definido pelos navegadores como inline-level element. 


SUDOCTYPE html 
«html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de frames</title> 
</head> 
<body> 
<hi>Exemplo de frames</h1> 
«iframe src="http://www.k19.com.br”> 
Esse navegador ndo suporta o elemento <i>iframe</i>. 
</iframe> 
<iframe src="http://www.usp.br"> 
Esse navegador nào suporta o elemento <i>iframe</i>. 


mds moe um ud end a 
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</iframe> 
</body> 
</html> 
Código HTML 2.63: Exemplo de frames 
eoo | Exemplo de frames x | al | 


e C [5 localhost/-keizo/html/public html/iframe.html 


Exemplo de frames 


VE ! 
Dos rm o 


KIS Curso Jave Digite aqui sua busca - Escolha a melhor opção de resi 
€ 


| TREINAMENTOS 


Figura 2.34: Exemplo de frames 
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Importante 
A No inicio do crescimento da Internet, um grande número de sites utilizavam iframes. 
Hoje em dia, os especialistas em design web não recomendam mais utilização desse 
recurso. Então, evite a utilização de iframes. 


‘© Links 


Normalmente, um site é formado por um conjunto de paginas que estao interligadas de alguma 
forma. Para permitir que um usuário navegue de uma página para outra, devemos utilizar os links. 
Basicamente, um link faz a ligacáo de uma página para outra do mesmo site (link interno) ou para 
uma página de outro site (link externo). 


Para criarmos um link, devemos utilizar o elemento a. Esse elemento possui um atributo cha- 
mado href. O valor desse atributo indica o caminho relativo ou absoluto de uma outra página. Nor- 
malmente, o a é definido pelos navegadores como inline-level element. 


<IDOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de links</title> 
</head> 
<body> 
<ul> 
clie» 
<a href="pagina2.html”>Exemplo de link com caminho relativo</a> 
</a> 
ult» 
«a href="outros/pagina3.html">Outro exemplo de link com caminho relativo</a>| 
San 
eiim 
«a hrefz"http://www.k19.com.br"»Exemplo de link com caminho absoluto</a> 
«/li» 
SATIUS 
</body> 
</html> 


à 


à 


à 


à 


à 


à 


à 


à 


à 


à 
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Código HTML 2.64: Exemplo de links 


eoo Exemplo de links x Li 


€ C | D localhost/-keizo/html/public html/a.html Ate & + + 


* Exemplo de link com caminho relativo 
* Outro exemplo de link com caminho relativo 
* Exemplo de link com caminho absoluto 


Figura 2.35: Exemplo de links 
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Além do atributo href, podemos utilizar o atributo target para informar onde o destino de um 
link deve ser aberto. 


* blank: Abre o destino do link em uma nova janela ou aba. 


* self: Abre o destino do link na mesma janela ou no mesmo frame que exibe o documento que 
contém o link. 


* parent: Abre o destino do link na janela ou no frame onde está contido o frame que exibe o 
documento que contém o link. 


2 


* top: Abre o destino do link na janela que é “ancestral” do frame que exibe o documento que 
contém o link. 


Um link com target self possui o mesmo comportamento de um link com target top se esses 
links estiverem em um documento HTML que não esteja dentro de outro documento HTML. 


Dentro de um documento HTML com diversos frames, podemos definir que o destino de um 
determinado link deve ser aberto em um determinado frame. Para realizarmos tal tarefa, o valor do 
atributo target deve ser o nome do frame onde o destino do link deve ser aberto. 


Por padrão, o destino de um link é aberto na mesma página ou frame onde ele está contido. Em 
outras palavras, se o atributo target não for definido explicitamente, o padrão é o comportamento 
do self. 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de uso da tag a com o atributo target</title> 
</head> 
<body> 
<ul> 
<li> 
<a href="paginal.html” target-" blank"»Abre em outra janela ou aba</a> 
Sa 
«li» 
<a href="pagina2.html” target-" self">Abre na mesma janela ou aba</a> 
sn 
«li» 
«a hrefz"pagina3.html"»Abre na mesma janela ou aba</a> 
B 
«/ul» 
</body> 
</html> 


à 


à 


à 


à 


à 


à 


à 


à 


" 


à 
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Código HTML 2.65: Exemplo de links com target 


a Exercícios de Fixacáo 


o Crie dois arquivos chamados links-origem.html e links-destino.html dentro do projeto html 
em Site Root. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 


AUN- 
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5 <title>Exemplo de links - origem</title> 
6 </head> 
7 <body> 
8 «hi»Exemplo de links - origem</h1> 
9 «ul» 
10 <li><a hrefz"http://www.k19.com.br" target=" blank"»Link externo</a></li> 
11 <li><a hrefz"links-destino.html" target-" self"»Link interno</a></li> 
12 <li><a href="links-destino.html” target-" top"»Link interno</a></p> 
13 <li><a hrefz"links-destino.html"»Link interno</a></li> 
14 </ul> 
15 </body> 
16 |</html> 
Código HTML 2.66: links-origem.html 
1 «!DOCTYPE html» 
2|«html lang="pt-br"> 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de links - destino</title> 
6 </head> 
7 <body> 
8 <h1>Exemplo de links - destino</h1> 
9 </body> 
10 |</html> 


Cédigo HTML 2.67: links-destino.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao54.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/links-origem.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/links-origem.html. 


‘© Ancoras 


Além de criar links para outras páginas, podemos criar um link para uma determinada seção 
de um documento HTML. Esse recurso é chamado de ancoragem. O primeiro passo para utilizar 
esse recurso é identificar a seção que será o destino desse link. Essa identificação é realizada com o 
atributo id. O id é um atributo global, ou seja, todos os elementos possuem esse atributo. O segundo 
passo é criar os links utilizando os identificadores das seções de acordo com a sintaxe do exemplo a 


seguir. Observe a utilização do caractere #. 


1 |SNDOCTYPE html> 

2 |<html langz"pt-br"» 

3 <head> 

4 <meta http-equiv="Content-Type” content="text/html; 
5 <title>Exemplo de âncoras</title> 
6 </head> 

T <body> 

8 <h1>Exemplo de âncoras</h1> 

9 <ul> 

0 <li> 

1 


= 


«a href="#brasil”>Brasil</a> 


charset=UTF -8"> 
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12 </li> 
13 elm 
14 «a href="&historia">História</a>] 
15 «/li» 
16 SED 
17 «a href="#geografia” >Geografia</a>| 
18 </li> 
19 <li> 
20 «a href="#demografia”>Demografia</a>| 
21 </li> 
22 cellae» 
23 <a hrefz"http://pt.wikipedia.org/wiki/BrasilfEconomia"»Economia«/a»] 
24 </li> 
25 </ul> 
26 
27 <h2 id="brasil">Brasil</h2>) 
28 
29 
30 <h3 id="historia">História</h3>) 
31 
32 
33 <h3 id="geografia">Geografia</h3> 
34 
35 
36 <h3 id="demografia">Demografia</h3> 
37 Sem 
38 </body> 
39 «/html» 
Código HTML 2.68: Exemplo de áncoras 
/ | Exemplo de âncoras 
€ > C [D localhost/-keizo/html/public html/a-02.html 
A 
Exemplo de áncoras 
* Brasil 
* História 
* Geografia 
e Demografia 
* Economia 
Brasil 
Figura 2.36: Exemplo de áncoras 
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ey Exercícios de Fixacáo 


o Crie um documento HTML chamado ancorasl.html no projeto html em Site Root. Adicione 
um link para uma seção dentro desse documento. Dica: insira conteúdo suficiente para que a barra 
de rolagem vertical do navegador apareça. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Exemplo de âncoras</title> 

6 </head> 

7 <body> 

8 <h1>Exemplo de âncoras</h2> 

9 <ul> 

10 s 

11 «a href="gsobre">Sobre o texto dessa pagina</a> 

12 Sn 

13 «/ul» 

14 

15 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo 
16 massa, sodales sit amet eleifend a, elementum eu nibh. Donec egestas dolor 
17 quis turpis dictum tincidunt. Donec blandit tempus velit, sit amet 

18 adipiscing velit consequat placerat. Curabitur id mauris.</p> 

19 

20 Soe coo pe 

21 

22 CGI soa S/S 

23 

24 <p>. SNOP 

25 

26 <p>At nisi imperdiet lacinia. Ut quis arcu at nisl ornare viverra. 

27 Duis vel tristique tellus. Maecenas ultrices placerat tortor. Pellentesque 
28 feugiat accumsan commodo. Proin non urna justo, id pulvinar lacus.</p> 
29 

30 <h2 id="sobre">Sobre o texto dessa pagina</h2> 

31 <p> 

32 O texto dessa pagina foi gerado através do site: 

33 <a href="http://www. lipsum.com/">http://www. lipsum. com/</a> 

34 </p> 

35 </body> 

36 |</html> 


Código HTML 2.69: ancoras1.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao56.zip 


[57] No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/html/public_html/ancoras1.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/-«USUARIO? /html/public. html/ancoras1.html. 


o Crie um novo arquivo chamado ancoras2.html no projeto html em Site Root. Identifique uma 
secáo com o nome ok. Dica: insira conteüdo suficiente para que a barra de rolagem vertical do 
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navegador apareça. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Exercicio sobre âncoras</title> 

6 </head> 

7 <body> 

8 <h1>Ancora página 2</h1> 

9 

10 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo 
11 massa, sodales sit amet eleifend a, elementum eu nibh. Donec egestas dolor 
12 quis turpis dictum tincidunt. Donec blandit tempus velit, sit amet 

13 adipiscing velit consequat placerat. Curabitur id mauris </p> 

14 IIS cos Se 

15 SIS soo SUE 

16 «p» ... </p> 

17 

18 <p> at nisi imperdiet lacinia. Ut quis arcu at nisl ornare viverra. 

19 Duis vel tristique tellus. Maecenas ultrices placerat tortor. Pellentesque 
20 feugiat accumsan commodo. Proin non urna justo, id pulvinar lacus.</p> 
21 

22 <h2 idz"ok"»0K«/h2» 

23 

24 <p>Se vocé chegou aqui deu tudo certo! :)</p> 

25 </body> 

26 «/html» 


Cédigo HTML 2.70: ancoras2.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao58.zip 


o Crie um novo link no arquivo ancoral.html que aponte para ancora ok do arquivo ancoras2.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Exemplo de âncoras</title> 

6 </head> 

7 <body> 

8 <h1>Exemplo de âncoras</h2> 

9 <ul> 

10 <li> 

11 <a href="gsobre">Sobre o texto dessa pagina</a> 

12 «bri 

13 | «li» 

14 | «a href="ancoras2.htmliok">Seção OK</a> 

15 | </li> 

16 </ul> 

17 

18 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo 
19 massa, sodales sit amet eleifend a, elementum eu nibh. Donec egestas dolor 
20 quis turpis dictum tincidunt. Donec blandit tempus velit, sit amet 

21 adipiscing velit consequat placerat. Curabitur id mauris.</p> 

22 

23 Je coq SM 

24 

25 SVS soo SDE 

26 

27 GIS soa S/S 

28 

29 <p>At nisi imperdiet lacinia. Ut quis arcu at nisl ornare viverra. 

30 Duis vel tristique tellus. Maecenas ultrices placerat tortor. Pellentesque 
31 feugiat accumsan commodo. Proin non urna justo, id pulvinar lacus.</p> 
32 
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33 <h2 id="sobre">Sobre o texto dessa pagina</h2> 

34 <p> 

35 O texto dessa pagina foi gerado através do site: 

36 «a href="http://www. lipsum.com/">http://www. lipsum.com/</a> 
37 </p> 

38 </body> 

39 |</html> 


Código HTML 2.71: ancoras1.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao59.zip 
© No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/ancoras1.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/ancoras1.html. 


‘© Imagens 


Certamente, os sites seriam muito entediantes se não fosse possível adicionar imagens ao con- 
teúdo das páginas. Podemos adicionar imagens em documento HTML com o elemento img. Esse 
elemento possui um atributo chamado src. Esse atributo indica o caminho absoluto ou relativo da 
imagem que queremos adicionar. Normalmente, o img é definido pelos navegadores como inline- 
level element. 


O elemento img possui um atributo obrigatório chamado alt. Esse atributo define um texto al- 
ternativo que pode ser utilizado, por exemplo, se houver um problema ao carregar a imagem ou por 
softwares de leitura de tela. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Exemplo de imagens</title> 

6 </head> 

7 <body> 

8 <h1>K19 Treinamentos</h1> 

9 «img srcz"http://www.k19.com.br/css/img/main-header-logo.png" alt="K19"/>| 
10 

11 <h2>Cursos</h2> 

12 <ul> 

13 <li> 

14 «img srcz"http://www.k19.com.br/css/img/k01-logo-large.png" alt="K01"/>| 
15 K01 - Lógica de Programação 

16 Sb 

17 «li» 

18 «img srcz"http://www.k19.com.br/css/img/k02-logo-large.png" alt="K02"/>| 
19 K02 - Desenvolvimento Web com HTML, CSS e JavaScript 

20 «/li» 

21 «li» 

22 «img src-"http://www.k19.com.br/css/img/k03-logo-large.png" alt="K03”"/> 
23 K03 - SQL e Modelo Relacional 

24 «/li» 

25 «li» 

26 «img srcz"http://www.k19.com.br/css/img/kll-logo-large.png" alt="K11"/>| 
27 K11 - Orientação a Objetos em Java 
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28 
29 
30 
31 

32 
33 
34 
35 


</li> 
<li> 
[img src="http://www.k19.com.br/css/img/k12-logo-large.png” alt="K12"/5 
K12 - Desenvolvimento Web com JSF2 e JPA2 
</i> 
</ul> 
</body> 
</html> 


Código HTML 2.72: Exemplo de imagens 


A 
eoo | Exemplo de imagens x Li | 


e C | D localhost/-keizo/html/public html/li.html Att $ e = 


| K19 Treinamentos 


po 
KIS 


TREINAMENTOS 


| Cursos 


I 

. K01 - Lógica de Programação 

. K02 - Desenvolvimento Web com HTML, CSS e JavaScript 
K03 - SQL e Modelo Relacional 


K11 - Orientação a Objetos em Java 


. K12 - Desenvolvimento Web com JSF2 e JPA2 


Figura 2.37: Exemplo de imagens 


Também podemos definir um tooltip para uma imagem com o atributo title. 


«img srcz"http://www.k19.com.br/css/img/main-header-logo.png" alt="K19" [title-"K19"/» 


Código HTML 2.73: Exemplo de imagens 


‘© URLs absolutas e relativas 


Os links e as imagens podem ser adicionados em um documento HTML com URLs absolutas ou 


relativas. 
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1 |<!DOCTYPE html» 

2 |I<html lang="pt-br"> 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>URLs absolutas e relativas</title> 

6 </head> 

7 <body> 

8 (<img src="imagens/k19-logo.png” alt="K19"> |) 
9 (<a hrefz"paginas/cursos.html"»Cursos«/a» 

10 </body> 

11 |</html> 


Código HTML 2.74: http://www.k19.com.br/index.html 


No exemplo acima, a URL do documento HTML é http://www.k19.com.br/index.html. Nesse 
documento, uma imagem e um link foram adicionados com URLs relativas (imagens/k19-logo.png e 
paginas/cursos.html). Por padrão, essas URLs são relativas a URL do documento HTML que contém 
a imagem e o link. Dessa forma, a URL da imagem é http://www.k19.com.br/imagens/k19-logo.png 
e a do link é http://www.k19.com.br/paginas/cursos.html. 


A mesma imagem e o mesmo link podem ser adicionados com URL absoluta. Veja o exemplo a 
seguir. 


1 |<!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>URLs absolutas e relativas</title> 

6 </head> 

7 <body> 

8 «img src="http://www.k19.com.br/imagens/k19-logo.png” alt="K19"> 
9 «a href="http://www.k19.com.br/paginas/cursos.html”>Cursos</a>| 
10 </body> 

11 |</html> 


Código HTML 2.75: http:/huww.k19.com.br/index.html 


Podemos definir uma URL base para as imagens e os links adicionados em um documento HTML 
com URLs relativas. A URL base é definida no valor do atributo href do elemento base. Esse elemento 
deve ser adicionado no conteúdo do elemento head. 


1 |<!DOCTYPE html» 

2 <html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 [base hrefz"http://www.k19.com.br/site"») 
6 <title>URLs absolutas e relativas</title> 
7 </head> 

8 <body> 

9 <img src="imagens/k19-logo.png” alt="K19"> 
10 <a href="paginas/cursos.html”>Cursos</a> 
13 «/body» 

12 |</html> 


Código HTML 2.76: www.k19.com.br/index.html 


No exemplo acima, a URL da imagem é http://www.k19.com.br/site/imagens/k19-logo.png e a 
do link é http://www.k19.com.br/site/paginas/cursos.html. 
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[2 Exercícios de Fixacáo 


@ Crie um documento HTML em um arquivo chamado imagens.html no projeto html em Site 
Root com algumas imagens. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Exemplo de imagens</title> 

6 </head> 

7 <body> 

8 <h1>K19 Treinamentos</h1> 

9 «img srcz"http://www.k19.com.br/css/img/main-header-logo.png" alt="K19"/> 
10 

11 <h2>Cursos</h2> 

12 <ul> 

13 <li> 

14 «img srcz"http://www.k19.com.br/figs/k01-logo-large.png" alt="K01"/> 
15 K01 - Lógica de Programação 

16 Sp 

17 «oi 

18 «img srcz"http://www.k19.com.br/figs/k02-logo-large.png" altz"K02"/» 
19 K02 - Desenvolvimento Web com HTML, CSS e JavaScript 

20 «/li» 

21 «li» 

22 «img srcz"http://www.k19.com.br/figs/k03-logo-large.png" altz"K03"/» 
23 K03 - SQL e Modelo Relacional 

24 </li> 

25 <li> 

26 «img src="http://www.k19.com.br/figs/k11-logo-large.png” alt="K11"/> 
27 K11 - Orientação a Objetos em Java 

28 eiiis 

29 «li» 

30 «img srcz"http://www.k19.com.br/figs/k12-logo-large.png" altz"K12"/» 
31 K12 - Desenvolvimento Web com JSF2 e JPA2 

32 eue 

33 «/ul» 

34 «/body» 

35 |</html> 


Código HTML 2.77: imagens.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao61.zip 


Q No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public_html/imagens.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/imagens.html. 


‘© Tabelas 
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Suponha que vocé esteja desenvolvendo o site de uma empresa e precisa apresentar alguns re- 
latórios em documentos HTML. Considere que os dados desses relatórios sao obtidos a partir de 
planilhas. Dai surge a necessidade de exibir dados de forma tabular em paginas web. 


Para resolver esse problema, podemos utilizar o elemento table. Esse elemento permite apre- 
sentar dados de forma tabular. As linhas de uma tabela são definidas com o elemento tr, as células 
de títulos com o elemento th e as células de dados com o elemento td. Os elementos th e td pos- 
suem um atributo chamado colspan e outro chamado rowspan. O colspan define quantas colunas 
uma célula deve ocupar e o rowspan define quantas linhas uma célula deve ocupar. Normalmente, 
o table é definido pelos navegadores como block-level element. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de tabela</title> 
6 </head> 

7 <body> 

8 <h1>Carros</h1> 

9 <table> 

10 Ste 

11 <th>Marca</th> 

12 <th>Modelo</th> 

13 <th>Ano</th> 

14 SA 

15 «tr» 

16 <td>Toyota</td> 

17 <td>Corolla</td> 

18 <td>2010</td> 

19 ky tre 

20 <r > 

21 <td>Honda</td> 

22 <td>Civic</td> 

23 <td>2011</td> 

24 SA 

25 St 

26 <td>Mitsubishi</td> 
27 <td>Lancer</td> 

28 <td>2012</td> 

29 hte 

30 Sues 

31 <td colspan="3">Ultima atualização: 06/2012</td> 
32 E UPE 

33 </table> 

34 </body> 

35 «/html» 


Código HTML 2.78: Exemplo de tabela 
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Marca Modelo Ano 
Toyota Corolla 2010 
Honda Civic 2011 
Mitsubishi Lancer 2012 
Ultima atualização: 06/2012 


[So o " Exemplo de tabela x VM E - 
€ C | D localhost/-keizo/html/public html/table-tr-th-td.html Q2 & + $ = 
Carros 


Figura 2.38: Exemplo de tabela 


Cabeçalho, corpo e rodapé 


boe xm gn dus uud om nx mE d 
«(oO co 41001 00 l2— OO to0o0 40 01 3» 00 (N20 — 


Para melhorar a semántica das tabelas, podemos definir explicitamente o cabecalho, o corpo eo 
rodapé de uma tabela através dos elementos thead, tbody e tfoot respectivamente. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 


«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 


<title>Exemplo de tabela</title> 
</head> 
<body> 

<h1>Carros</h1> 


<table> 
<thead> 
<tr> 
<th>Marca</th> 
<th>Modelo</th> 
<th>Ano</th> 
</tr> 
</thead> 
<tfoot> 


<tr> 


20 <td colspan="3">Última atualização: 06/2012</td> 
21 </tr> 

22 </tfoot> 

23 <tbody> 

24 LERZ 

25 <td>Toyota</td> 

26 <td>Corolla</td> 

27 <td>2010</td> 

28 a/tr> 

29 <tr> 

30 <td>Honda</td> 

31 <td>Civic</td> 

32 <td>2011</td> 

33 </tr> 

34 Sure 

35 <td>Mitsubishi</td> 
36 <td>Lancer</td> 

37 <td>2012</td> 

38 </tr> 

39 

40 </table> 

41 </body> 

42 |</html> 
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Código HTML 2.79: Exemplo de tabela 


eoo Exemplo de tabela x x 


€ Q' [D localhost/-keizo/html/public html/table-tr-th-td.html Qe & de * 


Carros 


Marca Modelo Ano 
Toyota Corolla 2010 
Honda Civic 2011 
Mitsubishi Lancer 2012 
Ultima atualização: 06/2012 


MM ———————— 


Figura 2.39: Exemplo de tabela 


Repare que visualmente náo mudou absolutamente nada. Além disso, apareceram mais alguns 
elementos: thead, tfoot e tbody. 


Qual é a semántica desses elementos? 


* thead: define o cabecalho da tabela 
* tfoot: define o rodapé da tabela 
* tbody: define o corpo da tabela 


Por que complicar? Qual o motivo da existéncia desses elementos? 


* O elemento thead, assim como o tfoot, servem para agrupar as linhas de cabecalho e de ro- 
dapé, respectivamente. 


* O código fica mais claro. 
* Facilita a aplicação de estilos CSS (através do seletor de elemento) 


* Os navegadores podem utilizar barras de rolagem para exibir o contetido de uma tabela longa. 
Essa característica nao é obrigatória. 


* Na impressão de uma tabela longa, a ferramenta utilizada pode replicar o cabeçalho e o rodapé 
em todas as páginas. Essa característica não é obrigatória. 


Títulos 


Também podemos definir um título para uma tabela através do elemento caption. Esse elemento 
deve ser o primeiro filho do elemento table. 


1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 


4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de título de tabela</title> 
6 </head> 
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7 <body> 
8 <table> 
9 [Xcaption>Carros</caption> 
10 eon 
11 </table> 
12 </body> 
13 |</html> 
Código HTML 2.80: Exemplo de título de tabela 
eoo y | Exemplo de titulodetabe x \ | a 
€ Œ | [5 localhost/-keizo/html/public html/caption.html Te 4 de z 


Carros 
Marca Modelo Ano 
Toyota Corolla 2010 
Honda Civic — 2011 
Mitsubishi Lancer 2012 
Ultima atualização: 06/2012 


Figura 2.40: Exemplo de titulo de tabela 


Agrupando colunas 


Podemos dividir as colunas de uma tabela em grupos. Normalmente, o principal motivo para 
estabelecer essa divisão é poder depois definir formatações específicas para cada grupo de colunas. 
Para dividir em grupos as colunas de uma tabela, devemos utilizar os elementos colgroup e col. O 
atributo span do elemento col define a quantidade de colunas de um determinado grupo. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exemplo de agrupamento de colunas</title> 
</head> 
<body> 
<h1>Carros</h1> 


<table> 
<colgroup> 
<!-- Agrupando a primeira e a segunda coluna --> 
«col spanz"2" style="background-color:gray"> 
<!-- Agrupando apenas a terceira coluna --> 
«col style-"background-color:yellow"» 
</colgroup> 


</table> 
</body> 
</html> 


= mia SP 
«(oO Oo 4001 3 UN — CO (O0 ANDO 3» 00 N20 — 


N 
e 


Código HTML 2.81: Exemplo de agrupamento de colunas 
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SEE PIER. a 
8 00; [5 Exemplo de agrupamento x Veda ! | — | x 


€ > Q (5 localhost/-keizo/html/public html/colgroup.html 


Figura 2.41: Exemplo de agrupamento de colunas 


Bx Exercícios de Fixacáo 


© Crie uma pagina HTML em um arquivo chamado tabela.html no projeto html em Site Root que 
contenha uma tabela de acordo com a imagem abaixo: 


Ê) Exercício para a tag table x 


€ — Q O localhost/k02-exemplos/capitulo-02/exercicio-table.html 


Figura 2.42: Exercício para a tag table 
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As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualização do pro- 
blema. 


1 |«! DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exercicio de tabela</title> 
6 </head> 

7 <body> 

8 <table> 

9 <thead> 

10 <tr> 

1 <th>Marca</th> 

12 <th>Modelo</th> 

13 <th>Ano</th> 

14 </tr> 

15 </thead> 

16 <tfoot> 

17 <tr> 

18 <td colspan="3">Última atualização: 06/2012</td> 
19 </tr> 

20 </tfoot> 

21 <tbody> 

22 <tr> 

23 <td rowspan="2">Toyota</td> 
24 <td>Corolla</td> 

25 <td>2010</td> 

26 </tr> 

27 <tr> 

28 <td>Camry</td> 

29 <td>2011</td> 

30 </tr> 

31 

32 Sire 

33 <td rowspan="3">Honda</td> 
34 <td>Civic</td> 

35 <td>2004</td> 

36 </tr> 

37 <tr> 

38 <td>Fit</td> 

39 <td>2012</td> 

40 </tr> 

41 <tr> 

42 <td>City</td> 

43 <td>2011</td> 

44 </tr> 

45 

46 Sire 

47 <td>Mitsubishi</td> 
48 <td>Lancer</td> 

49 <td>2012</td> 

50 </tr> 

51 </tbody> 

52 </table> 

53 </body> 

54 |</html> 


Cédigo HTML 2.82: tabela.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao63.zip 


Q No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/html/public html/tabela.html 
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No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/tabela.html 


[65] Altere o arquivo tabela.html do projeto html que está em Site Root. 


—DOCTIYPE htm 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exercicio de tabela</title> 
</head> 
<body> 
<table> 
<caption>Carros</caption> 
<colgroup> 
«col spanz"2" style="background-color:gray"> 
| 
) 


<col style="background-color:yellow"> 
</colgroup> 


</table> 
</body> 
</html> 


aaa ee ae ee 
NOnPWN HH COW AN DUN HPWDHDY >=> 


Cédigo HTML 2.83: tabela.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao65.zip 


© No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/html/public_html/tabela. html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/tabela.html 


‘© Formulários 


Alguns sites e praticamente todas as aplicações web necessitam obter informações enviadas pe- 
los usuários. Por exemplo, considere uma empresa que deseja receber os pedidos dos seus clientes 
através do seu site. O site dessa empresa precisa oferecer alguma forma de interação que possibilite 
o recebimento de dados fornecidos pelos usuários. 


Para tornar os sites e as aplicações web mais interativos, podemos utilizar formulários. Através 
dos formulários, os usuários podem enviar informações aos Web Servers. 


Para criar um formulário, devemos utilizar o elemento form. Esse elemento possui um atributo 
chamado action. O valor desse atributo indica para qual endereço os dados do formulário serão 
enviados. 


1 |<form action="pagina.html"> 


3 |</form> 
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Os formulários são compostos por caixas de texto, checkboxes, radios, caixas de seleção, botões, 
entre outros componentes. Provavelmente, você reconhecerá diversos desses componentes na ima- 


gem abaixo. 


Caixa de texto Caixa de senha Caixa de data 


Nome: Jonas Senha: ssssssssese Nascimento: 09/18/2013 av 


September 2013 + 


Sun Mon Tue Wed 
1 2 3 4 
8 9 10 11 
15 16 17 18 
22 23 24 25 
29 30 


Checkboxes Radio Botões 


Java * CH * PHP Manhã © Tarde ® Noite ok cancelar 


Figura 2.43: Componentes de formulário 


Caixas de texto 


Geralmente, os formulários possuem uma ou mais caixas de texto. As caixas de texto sáo adici- 
onadas nos documentos HTML através do elemento input. Esse elemento possui um atributo cha- 
mado type. Para definir uma caixa de texto, o valor do atributo type deve ser text. Normalmente, o 
input é definido pelos navegadores como inline-level element. 


1 |<input type="text"> 


Considere um formulário com diversas caixas de texto. Quando as informações preenchidas 
nesse formulário chegarem ao Web Server, certamente, ele precisará saber o que foi preenchido em 
cada caixa. Por isso, é necessário identificar esses dados. O atributo name do elemento input é 


utilizado para resolver esse problema. 


1 |<input type="text” |name="endereco”|> 


2 |<input type="text” |name-"cidade"| 


Parámetros, GET e POST 


Vamos analisar como os valores preenchidos nos formulários sáo enviados aos Web Servers. Con- 
sidere o seguinte exemplo. 
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/ |) Parâmetros, GET e POST x D \ 


€ 3 Œ |5 localhost/-keizo/html/public html/parametros-http-01.html 


Parâmetros, GET e POST 


Nome | | Estado | Enviar 


x | Elements | Resources Network Sources Timeline Profiles Audits Console 


<!DOCTYPE html» | Styles| Computed Event Listeners » 
v<html lang="pt-br"> T 
v <head> + ER 
«meta http-equiv-"Content-Type" content="text/html; charset=UTF-8"> 
<title>Parâmetros, GET e POST</title> 
</head> 
Y <body> 
«hi»Parámetros, GET e POST</h1> 
v «form action="cadastro.html"> 


State rst CXEXTXTZITIZHEIT 
PUT Type="su VSTUE-"ETVIS 
</form> 
</body> 
</html> 


D q 


Figura 2.44: Parámetros HTTP 


O formulário acima possui duas caixas de texto. Nas duas, o atributo name foi definido. Quando 
as caixas forem preenchidas e o formulário enviado, os dados desse formulário sáo adicionados na 
requisicáo HTTP. 


/ [' Parâmetros, GET e POST 


€ 3 Q' [D localhost/-keizo/html/public html/parametros-http-01.html 


Parâmetros, GET e POST 


x | Elements | Resources Network Sources Timeline Profiles Audits Console 


<!DOCTYPE html> | Styles| Computed Event Listeners » 
w «html langs"pt-br"» T 
Y «head» ToS 
«meta http-equiv-"Content-Type" content-"text/html; charset-UTF-8"» 
<title>Parâmetros, GET e POST</title> 
</head> 
Y <body> 
«hi»Parámetros, GET e POST</h1> 
v «form action="cadastro.html"> 
«label for="nome_id">Nome</label> 
«input id-"nome id" type="text" name="nome"> 
«label for="estado_id">Estado</label> 


<input id-"estado id" type="text" name="estado"> 
<input type="submit" value="Enviar"> 
</form> 
</body> 
</html> 


D q 


Figura 2.45: Parámetros HTTP 


Observe na imagem abaixo que os valores preenchidos nas caixas de texto sáo enviados como 
parâmetros na URL da requisição HTTP. Os nomes dos parámetros são exatamente os nomes defini- 
dos nas caixas de texto com o valor do atributo name. Note também que os valores dos parâmetros 
ficam expostos na barra de endereço do navegador. 
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|Ì Parâmetros, GET e POST x \ | o 
€ > Q' [N localhost/-keizo/html/public html/cadastro.htm Pnome=Jonas+Hirata&estado=SP| Qt sds = 


Parâmetros, GET e POST 


Formulário enviado com sucesso, 


x Elements Resources | Network! Sources Timeline Profiles Audits Console 


x | Headers | Preview Response Cookies Timing 


[<> cadastro.html?nome jo... Request URL: http://localhost/^keizo/html/public html/cadastro.html? 
[--keizo/html /public html nome=Jonas+Hirata&estado=SP 
Request Method: GET 
Status Code: @ 200 0K 
v Request Headers view source 


Accept: text/html,application/xhtmlexml,application/xml;q-0.9,image/webp,*/*;q-0. 


8 

Accept-Encoding: gzip,deflate, sdch 
Accept-Language: en-US, en;q=0.8 
Connection: keep-alive 


Cookie: PHPSESSID-f9mmsak4clldnud8lo2adidhb4; JSESSIONID-682ae7124aa6f4dbb8d7b237cf3a; treeFo 


rm tree-hi- 
Host: localhost 


Referer: http://localhost/^keizo/html/public html/parametros-http-01.html 


User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10 8 4) AppleWebKit/537.36 (KHTML, like Ge 


cko) Chrome/30.0.1599.47 Safari/537.36 
y Query String Parameters ) view source view URL encoded 
nome: Jonas Hirata 
1 requests | 631B transferred | estado: SP. ) 


[= DRE = @ © C | Documents Stylesheets Images Scripts XHR Fonts WebSockets Other 


Figura 2.46: Parámetros HTTP 


Muitas vezes, náo é adequado exibir os valores dos atributos na barra de endereco dos navega- 
dores. Podemos ocultar esses valores adicionando o atributo method com o valor post no elemento 
form. Esse atributo aceita apenas dois valores: get e post. Ele define o tipo de requisição HTTP que 
o navegador deve realizar para enviar o formulário. Nas requisições do tipo GET, os parámetros são 
adicionados na URL da requisição. Nas requisições do tipo POST, os parámetros são adicionados no 
conteúdo da requisição. 


/ |} Parâmetros, GET e POST x N \ 


€ 3 C [D localhost/-keizo/html/public html/parametros-http-01.html 


Parámetros, GET e POST 


Nome | | Estado! — | Enviar 


X | Elements | Resources Network Sources Timeline Profiles Audits Console 


«IDOCTYPE html> Styles| Computed Event Listeners » 


w«html lang-"pt-br"» 
b <head>..</head> 
v <body> 


«hi»Parámetros, GET e POST«/h 
v «form action-"cadastro.html" (method="post) 
<label for="nome_id">Nome</ TSB 


<input id="nome_id" type="text" name="nome"> 
<label for="estado_id">Estado</label> 
<input id-"estado id" type="text" name-"estado"» 
<input type="submit" value="Enviar"> 
</form> 
</body> 
</html> 


>= q 


Figura 2.47: Parámetros HTTP 
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€ 3 C [D localhost/-keizo/html/public html/parametros-http-01.html 


Parámetros, GET e POST 


x | Elements | Resources Network Sources Timeline Profiles Audits Console 


«IDOCTYPE html> 
w «html lang="pt-br"> 
> <head>..</head> 
v <body> 
<hi>Parâmetros, GET e POST</h1> 
vw «form action="cadastro. html” method="post"> 
«label for-"nome id">Nome</label> 
«input id-"nome id" type="text" name-"nome"» 
<label for="estado_id">Estado</label> 
<input id-"estado id" type="text" name="estado"> 
<input type="submit" value="Enviar"> 
</form> 
</body> 
</html> 


D x q 


Figura 2.48: Parâmetros HTTP 


Styles | Computed Event Listeners » 
+ E ER 


ese D localhost/-keizo/html/public html/cadastro.html 


Ave os = 


Parametros, GET e POST 


Formulário enviado com sucesso. 


x Elements Resources | Network | Sources Timeline Profiles Audits Console 


* | Headers | Preview Response Cookies Timing 


<>| cadastro.html Request URL: http://localhost/^keizo/html/public html/cadastro.html 


[-keizo/html/public html Request Method: POST 
Status Code: @ 200 0K 
v Request Headers view source 


8 

Accept-Encoding: gzip,deflate, sdch 
Accept-Language: en-US, en;q=0.8 

Connection: keep-alive 

Content-Length: 27 

Content-Type: application/x-www-form-urlencoded 


rm tree-hi- 
Host: localhost 
Origin: http://localhost 


7 Safari/537.36 
view URL encoded 


1 requests | 631B transferred | 
>= Q = € © Q | Documents stylesheets Images Scripts XHR Fonts WebSockets Other 


Figura 2.49: Parámetros HTTP 


Rótulos 


Accept: text/html,application/xhtmlexml,application/xml;q-0.9,image/webp,*/*;q-0. 


Cookie: PHPSESSID-f9mmsak4clldnud8lo2adidhb4; JSESSIONID-682ae7124aa6f4dbb8d7b237cf3a; treeFo 


Referer: http://localhost/-keizo/html/public html/parametros-http-01.html 
User-Agent: Mozilla/5.@ (Macintosh; Intel Mac OS X 10 8 4) AppleWebKit/537.36 (KHTML, like Ge 


Nos formulários, os rótulos sáo fundamentais para informar aos usuários quais dados devem ser 
preenchidos. Para adicionar um rótulo, devemos utilizar o elemento label. Os textos dos rótulos sáo 


definidos no conteúdo desse elemento. 
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(<label>Nome: </label> 
2 |<input type="text” name="nome”> 


Para melhorar a acessibilidade dos documentos HTML, os rótulos devem ser explicitamente as- 
sociados aos campos dos formulários. Para estabelecer esse vínculo, o primeiro passo é identificar 
os campos através do atributo id. O segundo passo é definir o atributo for do elemento label com o 
identificador do campo correspondente ao rótulo. 


1 |<label [for="nome id"»Nome: </label> 
2 |<input type="text” name="nome” [id="nome id"» 


Nome: | 


Figura 2.50: Rótulos 


Placeholders 


Como vimos, os rótulos são utilizados para informar aos usuários quais dados devem ser preen- 
chidos nos formulários. Além dos rótulos, podemos utilizar placeholders para dar dicas ou exemplos 
do contetido que desejamos em cada caixa de entrada. Um placeholder é criado através do atributo 
placeholder do elemento input. 


En 


«label for="nome id"»Nome: </label> 
2 |<input id="nome id" type="text” name="nome” placeholder-"Digite o seu nome aqui"» 


Nome: | 


Figura 2.51: Placeholder 


ER 


«label for="nome id"»Nome: </label> 
2|«input id="nome id" type="text” name-"nome" placeholder="Rafael Cosentino"> 


Nome: | 


Figura 2.52: Placeholder 


Botões de submit 


Para adicionar um botão de submit em um formulário, podemos utilizar o elemento input com 
type igual a submit. Esse tipo de botão envia os dados do formulário para o Web Server. Os textos 
desses botões são definidos com o atributo value. 


1 «input id="botao id" [type=" submit”) (value-"enviar"P 
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enviar 


Figura 2.53: Botões de submit 


Outra forma de adicionar um botão de submit em um documento HTML é utilizar o elemento 
button com type igual a submit. Diferentemente do elemento input, o elemento button permite a 


criação de botões com imagens além de texto. 


1 |<button id="botao id" type="submit"> 
2 Enviar 

3 <img src="submit.png” alt="Enviar"> 
4 |</button> 


Figura 2.54: Botões de submit 


p Exercícios de Fixacáo 


[67] Se vocé estiver utilizando o Ubuntu, crie um arquivo chamado parametros.php no projeto html 


em Site Root. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; 
<title>Parâmetros</title> 
</head> 
<body> 
<h1>Parâmetros</h1> 
<?php 
$params = file get contents('php://input') . ’&’ 
$params = explode(’&’, $params); 


à 


à 


à 


echo "sul. 
foreach ($params as $param) ( 
if (!empty($param)) { 
echo “<li>”; 
echo urldecode($param) ; 
echo 'ef/li-': 


} 


à NE 


à 


à 
co -410) 071i 3C) N2—O (000-1001 3» 0 n0 => 


à 
«e 


J 
echo </ul>": 
?> 
</body> 
</html> 


NNNN 
C) M = oO 


N 
A 


charsetzUTF-8"» 


$_SERVER[’ QUERY_STRING ’]; 


Cédigo HTML 2.93: parametros.php 


Se vocé estiver utilizando o Windows, crie um arquivo chamado parametros.asp no projeto html 


em Site Root. 
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1 «!DOCTYPE html» 

2|«html lang="pt-br"> 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Parâmetros</title> 

6 </head> 

7 <body> 

8 <h1>Parâmetros</h1> 

9 <ul> 

10 <% 

11 dim Params, ArrayOfParams 

12 If Request.Form <> "" And Request.QueryString <> "" Then 
13 Params = Request.Form & "&" & Request. QueryString 
14 Elself Request.Form <> "" Then 

15 Params = Request.Form 

16 Else 

17 Params - Request.QueryString 

18 End If 

19 

20 ArrayOfParams - Split(Params, "&") 

21 

22 For Each Param In ArrayOfParams 

23 Response. Write("<li>") 

24 Response. Write(Param) 

25 Response. Write("</li>") 

26 Next 

27 %> 

28 </ul> 

29 </body> 

30 |</html> 


Código HTML 2.94: parametros.asp 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao67.zip 


o Crie um arquivo chamado formulario-basico.html no projeto html em Site Root com o seguinte 
conteüdo. 


1|«! DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exercicio de formulário básico</title> 
6 </head> 
7 <body> 
8 <form action="parametros.php” method="post"> 
9 «label for="nome id">Nome: </label> 
10 <input id="nome id” type="text” name-"nome" placeholder="Seu nome”> 
11 
12 <label for="estado_id”>Estado: </label> 
13 <input id="estado_id” type="text” name="estado” placeholder="Seu estado”> 
14 
15 <input type="submit” value="Enviar”> 
16 </form> 
es </body> 
18 |</html> 
Código HTML 2.95: formulario-basico.html 
Importante 


No Windows, altere o código acima substituindo o trecho “parametros.php” pelo 
trecho “parametros.asp”. 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao68. zip 


© No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/formulario-basico.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/html/public html/formulario-basico.html. 


Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for- 
mulário. Chame o instrutor caso tenha alguma dúvida. 


‘© Caixas de entrada específicas 


As caixas de texto são componentes muito genéricos. Antes do HTMLS, informações de natureza 
bem distintas eram obtidas através desses componentes. Para melhorar a semântica dos documen- 
tos HTML, tipos específicos de caixas foram adicionados no HTML5. 


Caixas de busca 


Assim como as caixas de texto, as caixas de busca são adicionadas nos formulário com o elemento 
input. A diferença é que o valor do atributo type deve ser search ao invés de text. 


1 «input id="keywords id” name="keywords” [type="search”p 


As caixas de busca devem ser utilizadas para coletar palavras chave que serão utilizadas em al- 
gum tipo de pesquisa. A princípio não há nenhuma diferença prática entre as caixas de texto e as 
caixas de busca. Contudo, essa diferenciação adiciona valor semântico aos documentos HTML e 
possibilita, por exemplo, que os navegadores diferenciem visualmente esses dois tipos de caixas. 


Busca: | 


Figura 2.55: Caixas de busca 


Caixas de números 


Para coletar dados numéricos, podemos utilizar caixas específicas para números. No HTMLS, ha 
dois tipos de caixas para esse propósito. Os dois são definidos com o elemento input. O valor do 
atributo type é number para o primeiro tipo e range para o segundo tipo. 


1 |<input id="numero1 id" name="numero1” type="number "> 
2 |<input idz"numero2.id" namez"numero2" |type="range"|> 


Esses dois tipos de componentes devem ser utilizados para coletar valores de sequéncias nu- 
méricas pré-definidas. A principal diferenca entre eles é que o primeiro (type=number) deve ofe- 
recer um mecanismo preciso para os usuários selecionarem o valor desejado enquanto o segundo 
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(type=range) não possui essa obrigação. A imagem a seguir mostra uma possível forma dos navega- 
dores exibirem essas caixas. 


Idade: 1 : Quantidade: E 


Figura 2.56: Caixas de números 


Para definir a sequência dos números que podem ser selecionados pelos usuários, podemos uti- 
lizar os atributos min, max e step. Por exemplo, para coletar um número da sequência (0; 0,2; 0,4; 
0,6; 0,8; 1}, os valores dos atributos min, max e step devem ser 0, 1 e 0.2 respectivamente. 


1 |<input id="numerol id" type="number” name="numero1” [min="0") [max="1") (stepz"0.2"» 
2 |<input id="numero2 id" type="range” name="numero2” [minz"0"| [max="1"] [step="0.2"> 


Caixas de email, telefone e url 


No HTML5 foram definidas caixas de entradas específicas para emails, telefones e urls. Essas 
caixas são adicionadas com o elemento input. O valor do atributo type deve ser email, tel e url para 
emails, telefones e urls respectivamente. 


1 [<input id="email id” name="email” [type="email")> 


2 «input id="telefone id" name="telefone” [type-"tel"P 


3 |<input id="url id" name="url" type="url"p 


A usabilidade das páginas web melhora com a utilização dessas caixas. Por exemplo, a configu- 
ração do teclado dos celulares ou tablets pode ser alterada de acordo com o tipo de caixa de entrada. 
Nas caixas de email, o caractere “O” pode ser adicionado ao teclado. Nas caixas de telefone, o teclado 
não precisa conter as letras do alfabeto. Nas caixas de url, teclas especiais como “.com” ou “www” 
podem ser adicionadas ao teclado. 
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192.168.1.118/-keizo/html/pub Œ : 192.168.1.118/-keizo/html/pub C : 192.168.1.118/-keizo/html/pub C : 


E-mail: | E E-mail: | E-mail: | 
Telefone: | | E Telefone: ^ | Telefone: | 
Site: [ —— Site: [ | Ste[ S ] 


1 


8 F E E F E Od ] | n RA Wu uu 8 
qwer t y ui o 2 ABC 3 DEF qwer 


= " = i 


asdfghjk |! lacs 5x 6mo . asdfghj k 


4 zxcvbnm ea 7 Pars 8 Tuv 9 wxyz «a 4 z xcvbnm a 


223 @ 7 * dt 0-4 ao Avançar 


Figura 2.57: Caixas de email, telefone e url 


Caixas de datas e horas 


Diversos tipos de caixas de entrada para coletar datas e horas foram adicionados no HTML5. 
Todas essas caixas são adicionadas com o elemento input e o valor do atributo type desse elemento 
assumirá um dos valores listados a seguir. 


* date: Utilizado para coletar data (dia, mês e ano) sem fuso horário. 


* datetime: Utilizado para coletar data (dia, mês e ano) e hora (hora, minuto, segundo e fração 
de segundo) com fuso horário em UTC. 


* datetime-local: Utilizado para coletar data (dia, més e ano) e hora (hora, minuto, segundo e 
fração de segundo) sem fuso horário. 


* month: Utilizado para coletar data composta por mês e ano sem fuso horário. 


* time: Utilizado para coletar hora (hora, minuto, segundo e fração de segundo) sem fuso horá- 
rio. 


* week: Utilizado para coletar data composta por semana e ano sem fuso horário. 


A criação desses componentes permite que os navegadores melhorem a usabilidade das páginas 
web. A forma de exibição das caixas de datas e horas pode facilitar o processo de preenchimento 
dos formulários. Inclusive, os navegadores podem exibir esses componentes de formas diferentes de 
acordo com o dispositivo (computador, celular, tablet, entre outros). 


<input id="data id" name="data” (type-"date"P 

<input id="data hora fuso id” name="data-hora-fuso” (typez"datetime"» 
<input id="data hora id” name="data-hora” type="datetime-local”p 
<input id="mes id" name="mes" [type="month "> 
<input id="hora id" name="hora” [type-z"time"P 


<input id="semana id" name="semana” [type="week”p> 


SU E wNnN a 
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September 2013 v 


^ 
e 
X 


September 2013 v 


Sun Mon Tue Wed Thu Fri Sat Sun Mon Tue Wed Thu 
1 2 3 4 5 
8 9 10 11 12 
15 16 17 18 19 
22 23 24 25 26 
29 30 


Figura 2.58: date e datetime-local 


Week --, ---- av Enviar 


September 2013 ~ 4 e > September 2013 ~ 4 . + 


Week Sun Mon Tue Wed Thu Fri 
36 1 2 3 4 5 6 
37 8 9 10 11 12 13 
38 15 16 17 18 19 20 
39 22 23|24]|25 26 27 
40 29 30 


Sun Mon Tue Wed Thu Fri Sat 
1 2 3 4 5 6 7 
8 9 10 11 12 13 14 
15 16 17 18 19 20 21 
22 23 24 25 26 27 28 
29 30 


Figura 2.59: week e month 


12:11 PMO: Enviar 


Figura 2.60: time 


Caixas de senha 


As senhas devem ser coletadas com caixas específicas para esse tipo de informação. Para adicio- 
nar uma caixa de senha em um formulário, devemos utilizar o elemento input com o valor password 
para o atributo type. Normalmente, os navegadores utilizam símbolos como o asterisco ou o círculo 
para omitir o conteúdo das caixas de senha. 


1 |<input id="senha id" name="senha” itype-"password" 


W 


Senha: IITIIIIIIII 


Figura 2.61: Caixa de senha 


Caixas de texto longo 


Para coletar um texto com várias linhas, podemos utilizar o elemento textarea. A quantidade de 
linhas de um textarea é definida com o atributo rows e a quantidade de colunas com o atributo cols. 
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Esse elemento também possui 0 atributo name que funciona como no elemento input. 


1 |<textarea id="mensagem id” name-"mensagem" [rows="5"] [cols="50"> 


3 |</textarea> 


Podemos definir o limite de caracteres que podem ser inseridos no conteúdo do elemento texta- 


rea através do atributo maxlength. 


1 |<textarea id="mensagem id" name="mensagem” [maxlength="140")> 


3 |</textarea> 


Texto: 


Figura 2.62: Caixa de texto longo 


(> Exercícios de Fixacáo 


@ Crie um arquivo chamado formulario-caixas-especificas.html no projeto html em Site Root 


com o seguinte contetido. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exercicio de formulário com caixas especificas</title> 
6 </head> 

7 <body> 

8 <form action="parametros.php” method="post"> 
9 <label for="keywords_id”>Busca: </label> 
10 <input 

11 id="keywords_id” 

12 type="search” 

13 name="keywords” 

14 placeholder="Keywords"> 

15 

16 <br> 

17 

18 «label for="idade id">Idade: </label> 

19 <input 

20 id="idade. id” 

21 type-"number" 

22 name="idade” 

23 min="18" 

24 max="60"> 

25 

26 <br> 

27 

28 «label for="curtiu_id”>Curtiu: </label> 
29 <input 

30 id="curtiu id" 

31 type="range” 
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32 name="curtiu” 

33 minz"o" 

34 maxz"10"» 

35 

36 «br» 

37 

38 <label for="email_id”>Email: </label> 
39 <input 

40 id="email_id” 

41 type="email” 

42 name="email” 

43 placeholder="Seu email”> 

44 

45 <br> 

46 

47 «label for="telefone id">Telefone: </label> 
48 <input 

49 id="telefone id" 

50 type="tel” 

51 name="telefone” 

52 placeholder="Seu telefone"» 

53 

54 <br> 

55 

56 <label for="site id">Site: </label> 
57 <input 

58 id="site. id" 

59 type-"url" 

60 name-"site" 

61 placeholder="Seu site"> 

62 

63 «br» 

64 

65 «label for="nascimento id">Nascimento: </label> 
66 <input 

67 id="nascimento id" 

68 type-"date" 

69 name-"nascimento"» 

70 

71 «br» 

72 

73 <label for="festa aniversario id"»Festa de Aniversario: </label> 
74 «input 

75 id="festa aniversario id" 

76 type-"datetime-local" 

77 name="festa aniversario"> 

78 

79 <br> 

80 

81 «label for="proximo carnaval mes id"»Més do próximo Carnaval: </label> 
82 <input 

83 id="proximo carnaval mes. id" 

84 type="month” 

85 name="proximo carnaval mes"» 

86 

87 <br> 

88 

89 «label for="semana rock in rio id"»Semana do Rock in Rio: </label> 
90 «input 

91 id="semana rock in rio id" 

92 type-"week" 

93 name-"semana rock in rio"» 

94 

95 «br» 

96 

97 «label for="horario de entrada id">Horário de entrada: </label> 
98 «input 

99 id="horario de entrada id" 

100 type-"time" 

101 name-"horario de entrada"» 
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03 <br> 

04 

05 «label for="senha_id”>Senha: </label> 
06 <input 

07 id="senha_id” 

08 type="password” 

09 name="senha” 

10 placeholder="Sua senha"» 

11 

12 <br> 

13 

14 <label for="mensagem_id”>Mensagem: </label> 
15 <textarea 

16 id="mensagem_id” 

17 name="mensagem” 

18 rowsz"5" 

19 cols="50" 

20 maxlength="150"></textarea> 

21 

22 <br> 

23 

24 <input type="submit” value="Enviar”> 
25 </form> 

26 </body> 

27 «/html» 


Código HTML 2.104: formulario-caixas-especificas.html 


Importante 
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo 
trecho “parametros.asp”. 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao70.zip 


@ No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/formulario-caixas-especificas.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http://localhost/-<USUARIO>/html/public html/formulario-caixas-especificas.html. 


Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for- 
mulário. Chame o instrutor caso tenha alguma dúvida. 


‘© Checkboxes e Radios 


Para adicionar um checkbox em um formulário, devemos utilizar o elemento input com type 
igual a checkbox. Ao utilizar esse componente, é importante definir um valor para o atributo value. 
No envio do formulário, esse valor é transmitido ao Web Server se o checkbox correspondente estiver 
marcado. 


1|«input id="sim id" name="newsletter” [type="checkbox") [value="sim” 
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Eventualmente é interessante agrupar um determinado conjunto de checkboxes. Por exemplo, 
considere um formulário que coleta as linguagens de programacáo que os usuarios conhecem. Para 
cada linguagem, podemos definir um checkbox. Para agrupar esses checkboxes, basta definir o atri- 
buto name com o mesmo valor para eles. 


«input id="java id” type="checkbox” value="java” |name="linguagens "|> 
<input id="csharp_id” type="checkbox” value="csharp” (name="linguagens"> 
<input id="php_id” type="checkbox" value="php” |name="linguagens "> 
<input id="ruby id” type="checkbox” value="ruby” |name-"linguagens "P 
<input id="perl id” type="checkbox” value="perl” |name="linguagens "|> 


ak wnr 


* Java «Cf PHP 4 Ruby Perl 


Figura 2.63: Checkboxes 


Para adicionar um radio em um formulário, devemos utilizar o elemento input com type igual a 
radio. Ao utilizar esse componente, é importante definir um valor para o atributo value. No envio 
do formulário, esse valor é transmitido ao Web Server se o radio correspondente estiver marcado. 


1 |<input id="masculino id” name="sexo” [type="radio"] (value="masculino"> 


Eventualmente é interessante agrupar um determinado conjunto de radios. Por exemplo, consi- 
dere um formulário que coleta o time preferido dos usuários. Para cada time, podemos definir um 
radio. Para agrupar esses radios, basta definir o atributo name com o mesmo valor para eles. 


<input id="sp id" type="radio” value="sao-paulo” [name-"time-preferido"P 

<input id="barcelona id" type="radio” value="barcelona” [name="time-preferido"p 
<input id-"milan id" type="radio” value="milan” (name="time-preferido"> 

<input id="mu id" type="radio” value="manchester united” [name-"time-preferido"P 
<input id="bdm id" type="radio” value="bayern-de-munique” [name="time-preferido"p 


qRwnNnNa 


® São Paulo Barcelona Milan Manchester United Bayern de Munique 


Figura 2.64: Radios 


Por padrão, quando um formulário é exibido para os usuários, os checkboxes e os radios não es- 
tão marcados. Algumas vezes, desejamos que determinados checkboxes e radios estejam marcados 
quando os formulários são apresentados aos usuários. Para resolver esse problema, podemos utilizar 
o atributo checked do elemento input. Esse atributo não precisa de valor. 


1 |<input id="java id” type="checkbox” value="java” name="linguagens” (checked 


1 |<input id="sp id” type="radio” name="time-preferido” value="sao-paulo” |checked|> 


"9 Selecáo de cores 


No HTMLS, para coletar uma cor, podemos utilizar o elemento input com type igual a color. 
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1 |<input id="cor_id” name="cor” |type="color”> 


or: eoo Colors 
PEERS 


a 


Figura 2.65: Seleção de cores 


ey Exercícios de Fixacáo 


Q Crie um arquivo chamado checkboxes.html no projeto html em Site Root com o seguinte con- 


tetido. 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 


<title>Exercicio de checkboxes</title> 
</head> 
<body> 
<form action="parametros.php” method="post"> 
«label for="java id">Java</label> 


«label for="csharp_id”>C#</label> 
<input id="csharp. id” type="checkbox” value="csharp” 


<label for="php_id”>PHP</label> 


«label for="ruby_id”>Ruby</label> 


AAs E, 
OANA TFWNH HF COHAN DAO 00 N20 — 


20 

21 <label for="perl id">Perl</label> 

22 <input id="perl id" type="checkbox” value="perl” name-"linguagens"» 
23 

24 <input type="submit” value="Enviar”> 

25 </form> 

26 </body> 

27 |</html> 


«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 


<input id="java_id” type="checkbox” value="java” name="linguagens” 


name-"linguagens"» 


«input id="php id” type="checkbox” value="php” name="linguagens"> 


<input id="ruby. id” type="checkbox” value="ruby” name="linguagens” 


Código HTML 2.112: checkboxes.html 
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Importante 
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo 
trecho “parametros.asp”. 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao72.zip 


Q No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/html/public. html/checkboxes.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/html/public html/checkboxes. html. 


Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for- 
mulário. Chame o instrutor caso tenha alguma dúvida. 


Q Crie um arquivo chamado radios.html no projeto html em Site Root com o seguinte conteúdo. 


1 |<!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Exercicio de radios</title> 

6 </head> 

7 <body> 

8 <form action="parametros.php” method="post"> 

9 <label for="sp id">São Paulo</label> 

10 <input id="sp id" type="radio” value="sao-paulo” name="time-preferido” checked» 
11 

12 «label for="barcelona id">Barcelona</label> 

13 <input id="barcelona id” type="radio” value="barcelona” name="time-preferido”> 
14 

15 «label for="milan id">Milan</label> 

16 <input id="milan id" type="radio” value="milan” name="time-preferido”> 

17 

18 «label for="mu id"»Manchester United</label> 

19 <input id-"mu id" type="radio” value="manchester-united” name="time-preferido”> 
20 

21 <label for="bdm_id”>Bayern de Munique</label> 

22 <input id="bdm id" type="radio” value="bayern-munique” name="time-preferido"> 
23 

24 <input type="submit” value="Enviar"> 

25 </form> 

26 </body> 

27 «/html» 


Código HTML 2.113: radios.html 


Importante 
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo 
trecho “parametros.asp”. 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao74.zip 
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@ No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/html/public. html/radios.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/radios.html 


Utilize o Chrome DevTools ou o Firebug para verificar os parámetros enviados através do for- 


mulário. Chame o instrutor caso tenha alguma dúvida. 


@ Crie um arquivo chamado selecao-cores.html no projeto html em Site Root com o seguinte 


conteúdo. 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; 
<title>Exercicio de seleção de cores</title> 
</head> 
<body> 
<form action="parametros.php” method="post"> 
«label for="cor id"»Cor: </label> 
<input id="cor id” name="cor" type="color"> 


<input type="submit” value="Enviar"> 
</form> 
</body> 
</html> 


Ed md Goi, Ca) Vus A 
EUwUNAO LOCO DAN AWUN = 


charset=UTF -8"> 


Código HTML 2.114: selecao-cores.html 


trecho “parametros.asp”. 


Importante 
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao76.zip 


@ No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/html/public_html/selecao-cores.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/selecao-cores.html. 


Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for- 


mulário. Chame o instrutor caso tenha alguma dúvida. 


‘© Botões 
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Botões genéricos 


Para adicionar um botao genérico em um formulário, podemos utilizar o elemento input com 


type igual a button. As ações desse tipo de componente são definidas com JavaScript. Os textos 
desses botões são definidos com o atributo value. 


«input id="botao id” [type="button") (value="botao"]> 


Figura 2.66: Botões genéricos 


Outra forma de adicionar um botão genérico em um documento HTML é utilizar o elemento 


button com type igual a button. Diferentemente do elemento input, o elemento button permite a 
criação de botões com imagens além de texto. 


1 <button id="botao id" type="button"> 
2 Botão genérico 

3 <img src="botao.png” alt="Botão"> 
4 |</button> 


Botào genérico 9 


Figura 2.67: Botões genéricos 


Botões de reset 


Para adicionar um botáo de reset em um formulário, podemos utilizar o elemento input com 


type igual a reset. Esse tipo de botão reinicia os dados do formulário. Os textos desses botões são 
definidos com o atributo value. 


1 |<input id="botao_id” |type="reset” 


(value-"reiniciar"P 


reiniciar 


Figura 2.68: Botões de reset 


Outra forma de adicionar um botáo de reset em um documento HTML é utilizar o elemento 


button com type igual a reset. Diferentemente do elemento input, o elemento button permite a 
criacáo de botóes com imagens além de texto. 


1 |<button id="botao id" type="reset"> 

2 Botão de reset 

3 «img src="reset.png” alt="Reiniciar"> 
4 |</button> 

104 
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Botào de reset 9 


Figura 2.69: Botões de reset 


Botóes de upload 


Para adicionar um botão de upload em um formulário, podemos utilizar o elemento input com 
type igual a file. Esse tipo de botão permite selecionar um arquivo para um eventual upload. O 
formulário que contém esse botão deve possuir o atributo enctype com o valor multipart/form- 
data. 


1 «input id="botao_id” name="file” |type-"file"P 


Choose File | No file chosen 


Figura 2.70: Botões de upload 


Imagem como botao de submit 


Uma imagem pode funcionar como um botao de submit. Para isso, devemos utilizar o elemento 
input com type igual a image. O caminho absoluto ou relativo da imagem que será utilizada deve 
ser definida com o atributo src. Um texto alternativo deve ser definido com o atributo alt. Esse texto 
pode ser utilizado caso ocorra algum problema no carregamento da imagem. 


1 |<form action="parametros.php” method="post” enctype="multipart/form-data"> 
2 <input id="botao_id” (alt="enviar"] (type="image"](src="submit.png”> 
3 |</form> 


Figura 2.71: Imagem como botão de submit 


CR Exercícios de Fixacáo 


Q Crie um arquivo chamado botoes.html no projeto html em Site Root com o seguinte conteúdo. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exercicio de checkboxes</title> 

6 </head> 

7 <body> 

8 


<form action="parametros.php” method="post” enctype="multipart/form-data"> 
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9 <input id="file id" type="file” name-"file"» 
10 
11 «input id-z"b1" type="button” value="Botão genérico"> 
12 
13 «button id="b2” type="button"> 
14 Botão genérico 
15 «img srcz"http://www.k19.com.br/figs/botao-generico.png" alt="Botão"> 
16 </button> 
17 
18 <input id="b3" type="reset” value="Reiniciar"> 
19 
20 «button id="b4" type="reset"> 
21 Botáo de reset 
22 «img srcz"http://www.k19.com.br/figs/botao-reset.png" alt="Reiniciar"> 
23 </button> 
24 
25 <input id="b5” 
26 type="image” 
27 alt="enviar” 
28 srcz"http://www.k19.com.br/figs/submit.png"» 
29 </form> 
30 </body> 
31 |«/html» 
Código HTML 2.121: botoes.html 
Importante 


No Windows, altere o código acima substituindo o trecho “parametros.php” pelo 
trecho “parametros.asp”. 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao78.zip 


(79) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public_html/botoes.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http://localhost/-<USUARIO>/html/public html/botoes.html 


Utilize o Chrome DevTools ou o Firebug para verificar os parámetros enviados através do for- 
mulário. Chame o instrutor caso tenha alguma düvida. 


"9 Drop-down list 


Muitos formulários permitem que os usuários selecionem um ou mais itens de uma lista de op- 
ções. Essa seleção pode ser realizada através de um drop-down list. Para adicionar esse tipo de com- 
ponente, devemos utilizar o elemento select. Normalmente, o select é definido pelos navegadores 
como inline-level element. 


1 |<select id="estados id" name-"estado"» 


3 |</select> 


106 www.k19.com.br M KIS 


107 


HTML 


As opções devem ser definidas no conteúdo do elemento select e elas são adicionadas com o ele- 
mento option. O conteúdo do elemento option é exibido para os usuários. Esse elemento possui um 
atributo chamado value. Quando o formulário for enviado, o valor do atributo value é transmitido 
ao Web Server se a opção correspondente foi selecionada pelo usuário. Se esse atributo não estiver 
definido, o conteúdo do elemento option é transmitido ao Web Server se a opção correspondente foi 
selecionada pelo usuário. 


<option 
<option 
<option 
<option 
</select> 


SU E WDM a 


<select id="estados id" name-"estado"» 


value="SP">São Paulo</option> 
value="RJ">Rio de Janeiro</option> 
value="RS">Rio Grande do Sul</option> 
value="RN”>Rio Grande do Norte</option> 


São Paulo = 


Rio de Janeiro 


Rio Grande do Sul 
Rio Grande do Norte 


Figura 2.72: Drop-down list 


Por padrão, apenas um item de um drop-down list pode ser selecionado pelos usuários. Mas, 
utilizando o atributo multiple, um ou mais itens podem ser selecionados. Geralmente, mantendo a 
tecla CTRL pressionada, os usuários poderão escolher dois ou mais itens. 


<option 
<option 
<option 
<option 
<option 
<option 
</select> 


ON OOF WYN 


<select id="estados_id” name="estado” |multiple-"multiple" 


vi 


value="SP">São Paulo</option> 
value="RJ">Rio de Janeiro</option> 
value="RS">Rio Grande do Sul</option> 
value="PR">Paraná</option> 
value="RN”>Rio Grande do Norte</option> 
value="BA">Bahia</option> 


São Paulo 


Rio de Janeiro 


Rio Grande do Sul 
Parana 


Figura 2.73: Drop-down list 


Nos drop-down lists com muitas opções, é interessante agrupar as opções em categorias. Esse 
agrupamento pode ser realizado com o elemento optgroup. Esse elemento possui um atributo cha- 
mado label. O valor desse atributo é exibido no drop-down list. 


1 |<select id="estados id" name-"estado"» 


2 <optgroup label="Região Sudeste"» 


29) K | S www.facebook.com/k1 9treinamentos 107 


HTML 108 


3 <option value="SP">São Paulo</option> 
4 <option value="RJ">Rio de Janeiro</option> 
5 </optgroup> 
6 
7 
8 


<optgroup label-"Regiáo Sul”>} 
<option value="RS">Rio Grande do Sul</option> 
<option value="PR">Paraná</option> 
9 </optgroup> 
10 <optgroup label="Região Nordeste"> 
11 <option value="RN”>Rio Grande do Norte</option> 
12 <option value="BA">Bahia</option> 
13 </optgroup> 
14 |</select> 


São Paulo 


Região Sudeste 
Rio de Janeiro 
Região Su 
Rio Grande do Sul 
Paraná 


Região Nordeste 
Rio Grande do Norte 
Bahia 


Figura 2.74: Drop-down list 


Drop-down list com itens pré-selecionados 


Quando um drop-down list é exibido para os usuários, opções podem estar por padrão seleciona- 
das. O atributo selected do elemento option define as opções que devem estar selecionadas quando 
um drop-down list é exibido para os usuários. Esse atributo não precisa de valor. 


<select id="estados id" name-"estado" multiple="multiple"> 
<optgroup label="Região Sudeste"» 
<option value-"SP" |[selected>São Paulo</option> 
<option value="RJ">Rio de Janeiro</option> 
</optgroup> 
<optgroup label="Região Sul"» 
<option value="RS" |selected>Rio Grande do Sul</option> 
<option value="PR">Paraná</option> 
</optgroup> 
<optgroup label="Região Nordeste"> 
<option value="RN">Rio Grande do Norte</option> 
<option value="BA">Bahia</option> 
</optgroup> 
</select> 


NR eee 
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p- Exercícios de Fixação 


o Crie um arquivo chamado drop-down-list.html no projeto html em Site Root com o seguinte 
conteüdo. 


1 
2 


<!DOCTYPE html» 
«html langz"pt-br"» 
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3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exercicio de checkboxes</title> 
6 </head> 
7 <body> 
8 <form action="parametros.php” method="post"> 
9 <select id="estados id" name="estados” multiple="multiple”> 
10 <option value="SP">São Paulo</option> 
11 <option value="RJ”>Rio de Janeiro</option> 
12 <option value="RS">Rio Grande do Sul</option> 
13 <option value="PR">Paraná</option> 
14 <option value="RN”>Rio Grande do Norte</option> 
15 <option value="BA">Bahia</option> 
16 </select> 
17 
18 <select id="estado id” name="estado"> 
19 <optgroup label="Região Sudeste"> 
20 <option value="SP">São Paulo</option> 
21 <option value="RJ">Rio de Janeiro</option> 
22 </optgroup> 
23 <optgroup label="Região Sul"» 
24 <option value="RS">Rio Grande do Sul</option> 
25 <option value="PR">Paraná</option> 
26 </optgroup> 
27 <optgroup label="Região Nordeste”> 
28 <option value="RN”>Rio Grande do Norte</option> 
29 <option value="BA">Bahia</option> 
30 </optgroup> 
31 </select> 
32 
33 <input type="submit” value="Enviar”> 
34 </form> 
35 </body> 
36 |</html> 
Código HTML 2.127: drop-down-list.html 
Importante 


trecho “parametros.asp”. 


No Windows, altere o código acima substituindo o trecho “parametros.php” pelo 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao80.zip 


Qo No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/html/public html/drop-down-list.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/~<USUARIO>/htm1/public_html/drop-down-list.html 


Utilize o Chrome DevTools ou o Firebug para verificar os parámetros enviados através do for- 


mulário. Chame o instrutor caso tenha alguma düvida. 


‘© Fieldset 
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110 


Os campos de um formulário muito longo podem ser agrupados logicamente com o 


elemento 


fieldset. No conteúdo desse elemento, podemos utilizar o elemento legend para definir a legenda do 


fieldset. Normalmente, o fieldset é definido pelos navegadores como block-level element. 


<fieldset> 
<legend>Dados Pessoais</legend> 


</fieldset> 
<fieldset> 
<legend>Formação</legend> 


o 4007014» wNnNa 


</fieldset> 
<fieldset> 
10 <legend>Experiência</legend> 
11 oe 
12 |</fieldset> 


wo 


— Dados Pessoais 


— Formação 


— Experiência 


Figura 2.75: Fieldset 


C^ Exercícios de Fixacáo 


(82) Crie um arquivo chamado fieldset.html no projeto html em Site Root com o seguinte conteúdo. 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exercicio de fieldset</title> 
</head> 
<body> 
<form action="parametros.php” method="post"> 
<fieldset> 
<legend>Dados Pessoais</legend> 
<label for="nome_id”>Nome: </label> 
<input idz"nome id" type="text” name="nome"> 
</fieldset> 
<fieldset> 
<legend>Formação</legend> 
«label for="curso_id”>Curso: </label> 
<input id="curso_id” type="text” name="curso"> 
</fieldset> 
<fieldset> 


—- 2 QJ M CN 
OANA TFWN —O (toon 4 O01 3» 00 N20 — 


20 <legend>Experiéncia</legend> 

21 «label for="empresa id">Empresa: </label> 

22 <input id="empresa id” type="text” name="empresa”> 

110 www.k19.com.br [4] KIS 


111 HTML 


23 «/fieldset» 
24 
25 <input type="submit” valuez"Enviar"» 
26 </form> 
27 </body> 
28 «/html» 
Código HTML 2.129: fieldset.html 
Importante 


No Windows, altere o código acima substituindo o trecho “parametros.php” pelo 
trecho “parametros.asp”. 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao82.zip 


[a3] No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/html/public. html/fieldset.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http://localhost/-<USUARIO>/html/public html/fieldset.html. 


Utilize o Chrome DevTools ou o Firebug para verificar os parámetros enviados através do for- 
mulário. Chame o instrutor caso tenha alguma dúvida. 


‘© Autocomplete 


Para melhorar a usabilidade, podemos utilizar o recurso do autocomplete nas caixas de entrada. 
Para utilizar esse recurso, devemos criar uma lista de sugestões com o elemento datalist. É funda- 
mental identificar as listas de sugestões com o atributo id. 


1[«datalist id="comidas id"» 


3 |</datalist> 


As opções devem ser definidas no conteúdo do elemento datalist e elas são adicionadas com o 
elemento option. O atributo value de um elemento option define uma sugestão. 


1 |<datalist id="comidas_id”> 
2 <option value="Lasanha"> 
3 <option value-"Pizza"» 

4 <option value-z"Sopa"» 

5 «option value-"Salada"» 
6 |</datalist> 


Com a lista de sugestões criada, podemos associá-la a uma caixa de entrada através do atributo 
list do elemento input. 


1 |«input id="comida id" name="comida” type="text” [List="comidas id"P 
2 
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3 |<datalist id="comidas id"» 
4 <option value-"Lasanha"» 
5 <option value="Pizza"> 

6 <option value="Sopa”> 

7 «option value="Salada”> 
8 |</datalist> 


Comida: p 


Sopa 


Salada 


Figura 2.76: Autocomplete 


p? Exercícios de Fixacáo 


@ Crie um arquivo chamado autocomplete.html no projeto html em Site Root com o seguinte 
conteüdo. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exercicio de autocomplete</title> 
</head> 
<body> 
<form action="parametros.php” method="post"> 
<input id="comida id" name="comida” type="text” list-"comidas id"» 


à 


<datalist id-"comidas id"» 
<option value="Lasanha"> 
<option value="Pizza"> 
<option value="Sopa”> 
<option value="Salada”> 

</datalist> 


à 


à 


di 


à 


à 


à 


à 


<input type="submit” valuez"Enviar"» 
</form> 
</body> 
</html> 


à. 


à 
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Código HTML 2.133: autocomplete.html 


Importante 
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo 
trecho “parametros.asp”. 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao84.zip 


O No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/html/public html/autocomplete. html. 
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No Ubuntu, utilize o Chrome para acessar o endereco: 
http://localhost/~<USUARIO>/htm1/public_html/autocomplete. html. 


Utilize o Chrome DevTools ou o Firebug para verificar os parámetros enviados através do for- 
mulário. Chame o instrutor caso tenha alguma düvida. 


‘© Campos ou botões desabilitados 


Eventualmente, determinados campos ou botóes de um formulário devem ser desabilitados. 
Para desabilitar um campo ou botáo, podemos utilizar o atributo disabled dos elementos input, 
select, textarea e button. Esse atributo não precisa de valor. 


M 


1 «input id="nome id" name="nome” type="text” [disabled 


Nome: Rafael Cosentino | 


Figura 2.77: Campos desabilitados 


VÀ 


1 |<select id="nomes id" |disabled 


3 |</select> 


São Paulo 


Figura 2.78: Campos desabilitados 


1 |<textarea [disabled 
2 |</textarea> 


M 


Caixa de texto desabilitada 


Figura 2.79: Campos desabilitados 


1|«button type="button” (disabled> 

2 Botdo desabilitado 

3 «img src="botao.png” alt="Botão desabilitado"» 
4 |</button> 
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Botão desabilitado ÆA 


Figura 2.80: Botões desabilitados 


‘© Campos fixos 


Eventualmente, determinados campos de um formulário devem ser fixo, ou seja, os usuários não 
podem alterar o conteúdo. Para fixar o conteúdo de um campo, podemos utilizar o atributo readonly 
dos elementos input e textarea. Esse atributo nào precisa de valor. 


1 [<input id="nome id” name="nome” type="text” value="Marcelo Martins" (readonly|> 


Nome: Marcelo Martins 


Figura 2.81: Campos fixos 


1 |<textarea |readonly| 
2 |Gostaria de efetuar a matrícula no K10 - Formação Desenvolvedor Java. 
3 |</textarea> 


Gostaria de efetuar a 
matrícula no K10 - 


Formação Desenvolvedor 
Java. 


Figura 2.82: Campos fixos 


p Exercícios de Fixacáo 


[a6] Crie um arquivo chamado disabled-readonly.html no projeto html em Site Root com o seguinte 
conteüdo. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Exercicio de autocomplete</title> 
</head> 
<body> 


<form action="parametros.php” method="post"> 
«label for="nome id"»Nome: </label> 
<input id="nome id" name-"nome" type="text” value="Marcelo Martins" readonly> 


«label for="email_id”>Email: </label> 
<input id="email id” name="email” type="email” disabled> 


aaa 
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14 

15 <input type="submit” value="Enviar"> 
16 </form> 

17 </body> 

18 |</html> 


Código HTML 2.140: disabled-readonly.html 


Importante 
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo 
trecho “parametros.asp”. 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao86.zip 


@ No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/html/public. html/disabled-readonly.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http://localhost/-<USUARIO>/html/public html/disabled-readonly.html. 


Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for- 
mulário. Chame o instrutor caso tenha alguma dúvida. 


"9 Validacáo 


Alguns recursos para realizar a validacáo dos campos de um formulário foram adicionados no 
HTMLS5. Essas validações ocorrem antes do envio dos formulários. Por padrão, algumas validações 
são realizadas automaticamente de acordo com o tipo do campo. Por exemplo, os navegadores veri- 
ficam se o conteúdo de uma caixa de email é um email válido. 


1 |<input id="email id" name="email” type="email"> 


E-mail Envar 


a Please enter an email address. 


Figura 2.83: Validação de email 


Os navegadores também verificam se o contetido de uma caixa de URL é uma url válida. 


1 |<input id="url id" name="url” type="url"> 
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URL: foto] i 


a Please enter a URL. 


Figura 2.84: Validação de URL 


Outras validações devem ser definidas explicitamente. Por exemplo, se um determinado campo 
é obrigatório, devemos utilizar o atributo required. Esse atributo não precisa de valor. 


1|«input id="nome id" name="nome” type="text” required» 


Nome: [nia 


ü Please fill out this field. 


Figura 2.85: Validação de campo obrigatório 


Se um determinado campo deve respeitar uma expressáo regular, devemo utilizar o atributo pat- 
tern. 


«input 
id="placa id" 
name="placa” 
type="text” 
pattern="[A-Z](3) [0-91(4)" 
title-"As placas são formadas por 3 letras ou 4 números"> 


O04» WN a 


Placa: [CARR] (Emir 


a Please match the requested 


format. 


As placas são formadas por 3 letras ou 
4 nümeros 


Figura 2.86: Validação com expressão regular 


Se o conteúdo de um campo numérico deve estar em um determinado intervalo, podemo utilizar 
os atributos min e max. 


«input 
id-"idade id" 
name="idade” 
type="number” 
minz"18" 
max="60" 
title="A idade minima é 18 e a máxima é 60"» 


NOOR WN 
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Idade: Enviar 


g Value must be greater than or 
equal to 18. 


A idade minima é 18 e a máxima é 60 


Figura 2.87: Validação de numérica de mínimo e máximo 


(> Exercícios de Fixacáo 


Crie um arquivo chamado validacao.html no projeto html em Site Root com o seguinte con- 


teúdo. 

1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exercicio de validação</title> 

6 </head> 

7 <body> 

8 <form action="parametros.php” method="post"> 

9 <label for="nome_id”>Nome: </label> 

10 <input id="nome_id” name="nome" type="text” required» 
11 

12 «label for="email_id”>Email: </label> 

13 <input id="email_id” name="email” type="email”> 

14 

15 «label for="url_id”>Site: </label> 

16 <input id="url_id” name="url” type="url"> 

17 

18 «label for="placa_id”>Placa: </label> 

19 <input 

20 id-"placa. id" 

21 name="placa” 

22 type="text” 

23 pattern iTA Z3 ROO dps 

24 title-"As placas são formadas por 3 letras ou 4 nümeros"» 
25 

26 <input type="submit” value="Enviar"> 

27 </form> 

28 </body> 

29 «/html» 


Código HTML 2.146: validacao.html 


trecho “parametros.asp”. 


Importante 
No Windows, altere o código acima substituindo o trecho “parametros.php” pelo 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-fixacao88.zip 


© No Windows, utilize o Chrome para acessar o endereco: 
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http: //localhost/html/public. html/validacao.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/html/public html/validacao.html. 


Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for- 
mulário. Chame o instrutor caso tenha alguma dúvida. 


‘© Partes de um documento HTML 


Normalmente, um documento HTML pode ser dividido em “pedaços”. Por exemplo, é comum 
existir cabeçalhos, rodapés e menus de navegação na maior parte das páginas web. No HTML5, 
diversos elementos foram adicionados para definir especificamente os principais “pedaços” que ge- 
ralmente um documento HTML possui. 


header 


O elemento header é utilizado para definir um cabeçalho de um documento HTML ou de uma 
seção de um documento HTML. O objetivo desse elemento é definir um conteúdo de introdução 
ou de navegação. Normalmente, no header, encontramos os elementos hl, h2, h3, h4, h5 e h6. 
No conteúdo do header, também é comum encontrar sumários, formulários de busca, logos, entre 
outros. 


1 |<body> 
2 <header> 
3 <h1>Blog da K19</h1> 
4 «img src="k19-logo.png” alt="K19"> 
5 </header> 
6 
7 <article> 
8 <header> 
9 <h1>Novos elementos do HTML5</h1> 
10 «img src="html5-logo.png” alt="HTML5"> 
11 </header> 
12 
13 See 
14 </article> 
15 
16 ae 
17 |</body> 
Código HTML 2.147: Exemplo de cabeçalho 
footer 


O elemento footer é utilizado para definir um rodapé para o documento HTML ou para uma 
seção do documento HTML. É muito comum encontrarmos em seu conteúdo informações sobre a 
seção a qual ele pertence como quem a escreveu, links relacionados ao conteúdo da seção e infor- 
mações legais, por exemplo. 


1 

2 co 

3 <article> 
4 <p>Loren ipsum...</p> 
5 
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6 <footer>Postado por: Jonas Hirata</footer> 
7 </article> 
8 
9 <footer>&copy;2013 K19 Treinamentos.</footer> 
10 |</body> 
Código HTML 2.148: Exemplo de rodapé 
nav 


O elemento nav é utilizado para definir um bloco com os principais links de um documento 
HTML. É comum, definir os principais links de um documento HTML nos rodapés. Dessa forma, o 
elemento nav aparecerá com frequência no conteúdo do elemento footer. 


1 |<body> 
2 «header» 
3 «hi»Blog da K19</h1> 
4 
5 «nav» 
6 «a href="#">Home</a> 
7 «a href="#">Ultimos posts</a> 
8 <a href="#">Arquivo</a> 
9 </nav> 
10 </header> 
11 
12 <section> 
13 <hi>Meus Posts</h1> 
14 
15 nue 
16 </section> 
17 
18 <footer> 
19 <p>&copy ;2013 K19 Treinamentos.</p> 
20 <nav> 
21 <a href="#">Home</a> 
22 <a href="#">Ultimos posts</a> 
23 <a href="#">Arquivo</a> 
24 </nav> 
25 </footer> 
26 |</body> 
Código HTML 2.149: Exemplo de nav 
article 


O elemento article é utilizado para definir uma composição independente em um documento 
HTML. A princípio, um article pode ser distribuído independentemente ou facilmente reutilizado. 
É apropriado utilizar esse elemento para definir um post de um fórum, um artigo de uma revista 
ou jornal, um post de um blog, um comentário enviado por um usuário, um widget interativo ou 
qualquer item independente de conteüdo. 


Considere um blog no qual os usuários podem enviar comentários sobre os posts publicados. Os 
posts desse blog podem ser definidos com o elemento article. Os comentários podem ser definidos 
com elementos article internos aos que definem os posts. Um elemento article dentro de outro 
elemento article deve definir algo relacionado ao conteúdo do article que o contém. 


1 |«body» 

2 «article» 

3 <hi>Primeiro post do blog</h1> 
4 <p>Loren ipsum...</p> 

5 
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6 <h2>Comentarios</h2> 

7 <article>Legal este post!</article> 

8 <article>Bacana este post!</article> 
9 <article>Da hora este post!</article> 
0 </article> 

1 |</body> 


Código HTML 2.150: Exemplo de artigo 


aside 


O elemento aside é utilizado para definir algum conteúdo que esteja relacionado ao conteúdo 
principal, mas não é o foco do documento HTML. Normalmente, esse elemento é exibido em uma 
coluna lateral em relação ao conteúdo principal. 


1 |<body> 
2 <article> 
3 <h1>Novidades do HTML5</h1> 
4 <p>Loren ipsum...</p> 
5 
6 <h2>Comentários</h2> 
7 <article>Legal este post!</article> 
8 <article>Bacana este post!</article> 
9 <article>Da hora este post!</article> 
10 </article> 
11 <aside> 
12 «hi»Posts relacionados</h1> 
13 wane 
14 </aside> 
15 |</body> 
Código HTML 2.151: Exemplo de aside 
section 


O elemento section é utilizado para definir uma seção genérica de um documento. Uma seção é 
o agrupamento de um conteúdo dentro de um tema. Normalmente, as seções possuem cabeçalho e 
rodapé. 


<body> 
<section> 
<h1>Últimos Posts</h1> 
<article> 
<h1>Primeiro post do blog</h1> 
<p>Loren ipsum...</p> 
</article> 


<article> 
<h1>Segundo post do blog</h1> 
<p>Loren ipsum...</p> 
</article> 


à 


à 


à 


à 


«article» 
<h1>Terceiro post do blog</h1> 
<p>Loren ipsum...</p> 
</article> 
</section> 
</body> 


i la AMET 


à 


à 
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Código HTML 2.152: Exemplo de seção 
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figure 


O elemento figure deve ser utilizado para definir um conteüdo que é auto-suficiente e tipica- 
mente referenciado como uma unidade singular do fluxo principal do documento. Opcionalmente 
o conteüdo pode possuir uma legenda. 


Por exemplo, esse elemento pode ser utilizado para definir ilustrações, diagramas, fotos, videos, 
códigos fonte em um documento HTML. Normalmente, esse itens sáo referenciados no conteüdo 
principal mas podem ser removidos sem afetar o fluxo do documento. 


figcaption 


ea cà cà) cà) là) ll 


à 


à. 
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O elemento figcaption deve ser filho de um elemento figure. Ele é utilizado para definir a legenda 
do conteúdo do elemento pai. Além disso, o elemento figcaption deve ser o primeiro ou último filho 
de um elemento figure. 


«body? 

«hi1»Novidades do HTML5</h1> 

<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 
enim est, ultrices ac vehicula vitae, pharetra id mauris. Quisque sit 
amet nisl mollis sem fermentum accumsan. Sed sed quam nisi, cursus 
sodales metus. Curabitur dapibus, massa sed sollicitudin viverra, odio 
justo dignissim metus, vel tempor turpis neque id erat. Aenean fermentum 
ultricies ante a luctus. 

</p> 

<figure> 
<img src="#" title="Aenean fermentum" alt="Mauris convallis, leo sollicitudin"» 
<figcaption>Figura 3b. Curabitur dapibus, massa sed sollicitudin.</figcaption> 

</figure> 

<p> 
Mauris fermentum lorem nec nisi euismod elementum. Aenean nec magna 
dolor, vel fermentum turpis. Mauris convallis, leo sollicitudin 
egestas malesuada, nunc est ultrices enim, eget varius odio felis et 
velit. Sed ac lorem nibh, ut convallis ante. 

</p> 

</body> 


Código HTML 2.153: Exemplo de figure e figurecaption 
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n PO. e 
CHRISTMAS PARTY 


25 1272013 at 6 pm 


Neque porro quisquam est qui dolorem 


Sáo Paulo, SP - 12/11/2013 - 03:45 PM 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus vulputate elit, sit amet venenatis 
ante lacinia eget. Ut id urna vel quam dictum elementum. Mauris rutrum magna nec erat ullamcorper 
scelerisque. Aenean non est libero. Mauris venenatis, velit quis mattis tempus, neque eros tristique purus, 
non pretium nisi urna at nunc. Morbi nec commodo dui, quis vulputate ligula. Maecenas vitae libero a 


turpis posuere fringilla. Pellentesque risus neque, pretium vitae elementum ac, ultrices et eros. THE WELLINGTON HOTEL. NEW YORK 


* Ki9 Treinamentos 
* Nulla tincidunt tincidunt 


1 
1 
1 
1 
1 
1 
1 
1 
: * Phasellus ullamcorper nibh 
1 

1 


Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget ullamcorper turpis, 
facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse pellentesque ligula arcu, in 
viverra massa rhoncus a. 


Comentários 


Mauris Vulputate 


13/11/2013 - 10:27 AM 


Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget 
ullamcorper turpis, facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse 
pellentesque ligula arcu, in viverra massa rhoncus a. 


article 


Donec Tristique 
13/11/2013 - 11:42 AM 


1 
1 
1 Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget 

1 ullamcorper turpis, facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse 
1 

1 


Donec quis suscipit odio, k19 treinamentos cle 


Sao Paulo, SP - 12/10/2013 - 06:19 PM 


facilisis commodo nisl. Aliquam rhoncus ut metus a vehicula. Suspendisse pellentesque ligula arcu, in 
viverra massa rhoncus a. Nulla at quam arcu. Quisque sed erat ac ligula auctor porttitor. Interdum et 
malesuada fames ac ante ipsum primis in faucibus. Vestibulum eleifend augue at ligula porta consectetur. 


1 

1 

1 

1 

1 

1 Sed sit amet enim sapien. Nulla quis lectus non orci pellentesque tristique. Duis eget ullamcorper turpis, 
1 

1 

1 

1 

ı Mauris a luctus leo. Curabitur auctor aliquet aliquam. 


1 
1 
1 Donec varius a nibh Donec varius a nibh | 
1 E [[[ [e 
1 1 
1 * Sedsit amet enim sapien * Maecenas non enim vel est volutpat : 
1 E 
1 * Nulla quis lectus non orci pellentesque tristique * Vivamus tristique tempor est, interdum. Like us on 1 
: * Duis eget ullamcorper turpis, facilisis commodo * Proin id pretium felis B (0) okface : 
1 * Suspendisse pellentesque ligula arcu, in viverra * Nulla tincidunt tincidunt est, ac porta quam i 
1 
1 * Nulla at quam arcu * Sed ultricies justo vitae ullamcorper pulvinar 1 
: * Quisque sed erat ac ligula auctor porttitor e Nullam dictum in nisl mollis ullamcorper > 
1 1 
1 1 
Figura 2.88: Partes de um documento HTML 
Ej 
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Normalmente, os elementos header, footer, nav, header, article, aside, section, figure e figcap- 


tion sáo definidos pelos navegadores como block-level elements. 


‘© Divisão de conteúdo 


Muitas vezes, desejamos separar o conteúdo de um documento HTML. Geralmente, essas divi- 
sões ocorrem quando há uma mudança de tópico no conteúdo. Essas divisões podem ser realizadas 


com o elemento hr. Normalmente, o hr é definido pelos navegadores como block-level element. 


1 |<body> 

2 <h1>Novidades do HTML5</h1> 

3 

4 <p> 

5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 

6 enim est, ultrices ac vehicula vitae, pharetra id mauris. Quisque sit 
7 amet nisl mollis sem fermentum accumsan. Sed sed quam nisi, cursus 

8 sodales metus. Curabitur dapibus, massa sed sollicitudin viverra, odio 
9 justo dignissim metus, vel tempor turpis neque id erat. Aenean fermentum 
10 ultricies ante a luctus. 

11 </p> 

12 

13 <hr> 

14 

15 <p> 

16 Mauris fermentum lorem nec nisi euismod elementum. Aenean nec magna 
17 dolor, vel fermentum turpis. Mauris convallis, leo sollicitudin 

18 egestas malesuada, nunc est ultrices enim, eget varius odio felis et 
19 velit. Sed ac lorem nibh, ut convallis ante. 

20 </p> 

21 |</body> 


Código HTML 2.154: Exemplo de separação de conteúdo 


a Exercícios de Fixacáo 


[90] Crie um arquivo chamado hr.html no projeto html em Site Root com o seguinte conteúdo. 


1 |<!DOCTYPE html» 

2 |I<html lang="pt-br"> 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Exercício de separação de conteúdo</title> 

6 </head> 

7 <body> 

8 <hi>Desenvolvimento Web</h1> 

9 

10 <h2>HTML</h2> 

11 <p> 

12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 
18 enim est, ultrices ac vehicula vitae, pharetra id mauris. Quisque sit 
14 amet nisl mollis sem fermentum accumsan. Sed sed quam nisi, cursus 

15 sodales metus. Curabitur dapibus, massa sed sollicitudin viverra, odio 
16 justo dignissim metus, vel tempor turpis neque id erat. Aenean fermentum 
17 ultricies ante a luctus. 

18 </p> 

19 

20 <hr> 

21 
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22 <h2>CSS</h2> 

23 <p> 

24 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 

25 enim est, ultrices ac vehicula vitae, pharetra id mauris. Quisque sit 

26 amet nisl mollis sem fermentum accumsan. Sed sed quam nisi, cursus 

27 sodales metus. Curabitur dapibus, massa sed sollicitudin viverra, odio 
28 justo dignissim metus, vel tempor turpis neque id erat. Aenean fermentum 
29 ultricies ante a luctus. 

30 </p> 

31 </body> 

32 |</html> 


Código HTML 2.155: hr.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-fixacao90.zip 


o No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/html/public html/hr.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/~<USUARIO>/htm1/public_html/hr.html. 


"9 Agrupando elementos 


Podemos agrupar elementos através dos elementos div ou span. Normalmente, os navegadores 
definem o elemento div como um block-level element e o span como um inline-level element. O 
principal objetivo em agrupar elementos com div ou span é aplicar formatações específicas para 
cada grupo. Por isso, a utilidade desses elementos ficará mais clara quando falarmos sobre CSS. 


Erro: Fechamento inadequado das tags 


Um erro comum, ao definir um documento HTML, é o fechamento inadequado das tags. 


1 |<!DOCTYPE html» 

2 |<html lang="pt-br"> 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Fechamento inadequado das tags</title> 

6 </head> 

7 <body> 

8 <strong>Fechamento <em>inadequado</strong> das tags</em> 

9 </body> 

10 |</html> 


Erro: Imagens sem texto alternativo 


Um erro comum, ao definir um documento HTML, é não definir um texto alternativos para as 


imagens. 
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COON AUN A UUN > 


EN 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Imagens sem texto alternativo</title> 
</head> 
<body> 
«img src="imagem.png”> 
</body> 
</html> 


Erro: Criar listas com o elemento br 


ceo -1001 4» 060 nN-— 


Ite] 


11 
12 


Um erro comum, ao definir um documento HTML, é criar listas com o elemento br. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Criar listas com o elemento br</title> 
</head> 
<body> 
1. HTML<br> 
2. (CSS 
3. JavaScript 
</body> 
</html> 


E Exercícios Complementares 


o Crie um arquivo chamado pagina-simples.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 


eoo K19 Treinamentos x a 


€ Œ | D localhost/-keizo/html/public html/pagina-simples.html ar dt $ = 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum pellentesque hendrerit. Aliquam pretium, 
quam in porttitor vestibulum, massa ligula sodales metus, nec hendrerit nunc purus eu mauris. 


aO 


e Crie um arquivo chamado geografia.html no projeto html em Site Root. Utilize aimagem abaixo 
como base. 
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/ [3 Curiosidades do Mundo x (| 


€ > @ (5 localhost/-keizo/html/public html/geografia.html 


Curiosidades do Mundo 


Europa 


A Europa é o segundo menor continente em superfície do mundo, cobrindo cerca de 10 180 000 quilômetros quadrados ou 2% da superfície 
da Terra e cerca de 6,8% da área acima do nível do mar. 


Alemanha 


Com 81,8 milhões de habitantes em janeiro de 2010, o país tem a maior população entre os Estados membros da União Europeia e é 
também o lar da terceira maior população de migrantes internacionais em todo o mundo. 


Hesse 


A capital é Wiesbaden e a maior cidade Francoforte do Meno (Frankfurt am Main), onde está localizado um dos maiores aeroportos do 
mundo e um centro financeiro de grande importância. 


Frankfurt 


Frankfurt am Main ou Francoforte do Meno, mais conhecida simplesmente como Frankfurt, é a maior cidade do estado alemão de Hesse e a 
quinta maior cidade da Alemanha, com uma população 700.000 habitantes em 2012. 


Ásia 
A Ásia é o maior dos continentes, tanto em área como em população. 
Japão 


O país é um arquipélago de 6 852 ilhas, cujas quatro maiores são Honshu, Hokkaido, Kyushu e Shikoku, representando em conjunto 97% 
da área terrestre nacional. 


Okinawa 


Antigamente, Okinawa fazia parte de um reino independente, o reino Ryukyu, o que foi decisivo para o desenvolvimento de uma cultura 
própria do desenrolar de uma história particular e significativamente diferenciada do resto do Japão. 


Nago 
De 21 de julho até 23 de julho de 2000, foi sede do encontro anual do G8. 


Fonte: wikipedia.org 


© Crie um arquivo chamado seguro-treinamento.html no projeto html em Site Root. Utilize a 
imagem abaixo como base. 


' | Seguro Treinamento - K19 x | — | 
e> C [3 localhost/-keizo/html/public html/seguro-treinamento.html BEEN Qu n E a 


Na K19 o aluno faz o curso quantas vezes quiser! 


Comprometida com o aprendizado e com a satisfação dos seus alunos, a K19 criou o Seguro Treinamento. 
Ao contratar um curso, o aluno poderá refazê-lo quantas vezes desejar mediante a disponibilidade de vagas e pagamento 
da franquia do Seguro Treinamento. 
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© Crie um arquivo chamado caracteres-especiais.html no projeto html em Site Root. Utilize a 


imagem abaixo como base. 


e o o | | Caracteres especiais x € im — 
e> CD localhost/-keizo/html/public html/caracteres-especiais.html om 


rr 


Caracteres especiais 


xxov É 


[5) Crie um arquivo chamado espacos-e-quebras-de-linha.html no projeto html em Site Root. 


Utilize a imagem abaixo como base. 


/ | Texto pré-formatado x bw \ 
€ > @ (5 localhost/-keizo/html/public html/espacos-e-quebras-de-linha.html 


Texto pré-formatado 


Ó Crie um arquivo chamado codigo-java.html no projeto html em Site Root. Utilize a imagem 


abaixo como base. 


eo o ' | Código Java x AA = Im— ] ! E 
€ > © D localhost/-keizo/html/public html/codigo-javahtml — — — — ^ Qi * HE 


Código Java 


double numero - Math.random(); 
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Q Crie um arquivo chamado elementos-i-b.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 


/ |} Elemento i eelemento b x Y 


€ > Q'|[)localhost/-keizo/html/public html/elementos-i-b.html 


Elemento i e elemento b 


* Porquinho-da-índia ou Cavia porcellus 

* Backup(cópia de seguranga) 

e shoot the breeze(bater papo ou jogar conversa fora) 

e Moskvá(transliteração da palavra Moscou em russo) 

* Se não sabes, aprende; se já sabes, ensina. (Confúcio) 


Atualmente, praticamente todos os sistemas corporativos possuem interfaces web. Para quem deseja atuar no mercado 
de desenvolvimento de software, é obrigatório o conhecimento das linguagens: HTML, CSS c JavaScript. 


Ó Crie um arquivo chamado sao-paulo.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 


' (5) São Paulo 


e> C [3 localhost/-keizo/html/public html/sao-paulo.html | 


Sao Paulo 


A cidade de Sáo Paulo possui uma área de 1.523 km?. Em 2011, São Paulo emitiu 16,430 milhões de toneladas de CO). 


O Crie um arquivo chamado spfc.html no projeto html em Site Root. Utilize a imagem abaixo 
como base. 


/ |) São Paulo FC 


€ > Q (5 localhost/-keizo/html/public html/spfc.html 


São Paulo FC 


O São Paulo FC é o único time brasileiro que ganhou três vezes o mundial de clubes. 
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O Crie um arquivo chamado mais-citacoes.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 


€ > C [5 localhost/-keizo/html/public html/mais-citacoes.html Att + + 


O que a Wikipedia fala sobre Java? 


Java is a general-purpose, concurrent, class-based, object-oriented computer programming language that is 
specifically designed to have as few implementation dependencies as possible. [*\dots*] 


The original and reference implementation Java compilers, virtual machines, and class libraries were 
developed by Sun from 1991 and first released in 1995. As of May 2007, in compliance with the 
specifications of the Java Community Process, Sun relicensed most of its Java technologies under the GNU 
General Public License.[*\dots*] 

Galvão Bueno disse: " A seleção brasileira prioriza o coletivo e a individualidade ". 


Dom Quixote de Miguel de Cervantes é um dos livros mais vendidos da história. 


O Crie um arquivo chamado abbr.html no projeto html em Site Root. Utilize a imagem abaixo 
como base. 


| | | Abreviações 


€ > @ (5 localhost/-keizo/html/public html/abreviacoes.html 


Abreviações 


* FBI 
* CIA 
e CSI 


(12) Crie um arquivo chamado mais-definicoes.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 
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Bo = m 
€ > Q' ||) localhost/-keizo/html/public html/mais-definicoes.html att oz 


Definições 


Folha seca 

Chute que faz a bola percorrer uma trajetória em curva acentuada com uma queda brusca no final do percurso. 
Lanterna 

Equipe que ocupa a última posição de um campeonato. 
Primeiro pau 

Trave mais próxima da origem de um cruzamento. 


(13) Crie um arquivo chamado mais-alteracoes.html no projeto html em Site Root. Utilize a imagem 


abaixo como base. 


/ [5 Exemplo de alterações x E X 
e> C [5 localhost/~keizo/html/public_html/mais-alteracoes.html 


Alterações 
Atualmente eu-moro-na Inglaterra: Atualmente, eu moro no Brasil. Eu-quero-eonhecer-a-Síria- 


© Crie um arquivo chamado mais-datas.html no projeto html em Site Root. Utilize a imagem 


abaixo como base. 


/ |" Datas e horas 


€ > @ (5 localhost/-keizo/html/public html/mais-datas.html 


Datas e horas 


* O Brasil foi pentacampeão em 30 de Junho de 2002. 
* Ele não pode esquecer o Dia das mulheres. 


(15) Crie um arquivo chamado texto-marcado.html no projeto html em Site Root. Utilize a imagem 


abaixo como base. 
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' | Texto marcado 


€ > C [5 localhost/-keizo/html/public html/texto-marcado.htm! 


Texto marcado 


Ayrton Senna da Silva foi um piloto brasileiro de Fórmula 1, três vezes campeão mundial, nos anos de 1988, 1990 e 


1991. Foi também vice-campeão no controverso campeonato de 1989 e em 1993 


O Crie um arquivo chamado pontos-turisticos.html no projeto html em Site Root. Utilize a ima- 
gem abaixo como base. 


800; [5 Pontos Turísticos x N S 


€ > @ (5 localhost/-keizo/html/public html/pontos-turisticos.html att dos 


Pontos Turísticos do Brasil 


Ilha Bela - SP 

Praias, Trilhas e Mergulho em Náufrago. 
Bonito - MS 

Mergulho em rios de águas transparentes, cachoeiras, grutas e cavernas. 
Museu de Arte de São Paulo - SP 

Grande acervo com diversas obras de artistas consagrados. 


@ Crie um arquivo chamado manual-k19.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 


/ |") Como instalar o seu XPTO x \ | y 
€ > Q'[localhost/-keizo/html/public html/manual.html 


Como instalar o seu XPTO - K19 Eletronics 


. Verifique se todos os acessórios estáo presentes. 


. Coloque o aparelho na horizontal sobre uma superficie plana. 
. Conecte o aparelho ao computador utilizando um cabo USB. 
. Use o CD-ROM para instalação do software. 

. Conecte o aparelho à fonte de energia com um adaptador AC. 
. Ligue o aparelho e espere o reconhecimento do computador. 
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O Crie um arquivo chamado mais-links.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 


€ > Œ (5 localhost/-keizo/html/public html/mais-links.html 


Links 


O Crie um arquivo chamado mais-imagens.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 


/ [ Imagens 


€ > @ [5 localhost/-keizo/html/public html/mais-imagens.html 


K19 Treinamentos 


ay 
KIS 


TREINAMENTOS 


K21 - Persistência com JPA2 e Hibernate 


K22 - Desenvolvimento Web Avangado com JSF2, EJB3.1 e CDI 


K23 - Integração de Sistemas com Webservices, JMS e EJB 


(20) Crie um arquivo chamado mais-tabelas.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 
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[5 Tabelas x ae m 


€ > Q ||5 localhost/-keizo/html/public html/mais-tabelas.html 


Continente/Subcontinente Cidade Idioma 
São Paulo Portugués 
Cidade do México Espanhol 
Tóquio Japonés 
Ásia Xangai Mandarim 

Nova Délhi Hindi 
América do Norte Nova Iorque Inglés 
Ultima atualização: 11/2012 


América do Sul 


@ Crie um arquivo chamado mais-formularios.html no projeto html em Site Root. 
gem abaixo como base. 


Utilize a ima- 


e is} Ba | Currículo 


€ > @ (5 localhost/-keizo/html/public html/mais-formularios.html 


Cadastro de Currículo 


r Informações Pessoais 
Nome: Digite o seu nome 


Email: |Digite o seu email 


Data de Nascimento: am G3 9997 
Altura(m): | — : 

Site: Facebook, Linkedin, | 

Estado Civil: 

Sexo: © Masculino © Feminino 


© HTML O CSS O JavaScript 


Digite os seus 
conhecimentos 


Resumo do Capítulo 
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> A linguagem HTML é utilizada na criação das páginas web e é especificada pelo W3C. 

p> Um documento HTML é composto por elementos hierarquicamente organizados. 

p> Os elementos são inseridos em um documento HTML com o uso de tags. 

P> O elemento DOCTYPE é utilizado para declarar o tipo do documento. 

> A raiz de um documento HTML é definida pelo elemento html. 

p» Informações sobre um documento HTML devem ser definidas no corpo do elemento head. 
E No corpo do elemento body, é definido o conteúdo do documento HTML. 


> A semântica dos elementos HTML deve ser respeitada para a correta interpretação do conteúdo 
por buscadores e softwares de leitura (acessibilidade), por exemplo. 


b» Os elementos h1, h2, h3, h4, h5 e h6 são utilizados para definir títulos em um documento 
HTML. 


p Parágrafos sáo inseridos em um documento HTML com o elemento p. 


[m- Determinados caracteres devem ser inseridos em um documento HTML através do seu respec- 
tivo código. 


p> Os elementos pre, code, i, b, sub, sup, strong, em, blockquote, q, cite, abbr, dfn, ins, del, s, 
time e mark são utilizados para definir os textos de um documento HTML. 


p As listas sem ordem sao definidas com o elemento ul. As listas com ordem sao definidas com o 
elemento ol. As listas de descrições são definidas com o elemento dl. 


p Os itens das listas com ordem e sem ordem são definidos com o elemento li. 


p» Os termos de uma lista de descrições são definidos com o elemento dt. As descrições desses 
termos sáo definidas com o elemento dd. 
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p Podemos adicionar um documento HTML dentro de outro documento HTML com o elemento 
iframe. 


p» Os links de um documento HTML sao criados com o elemento a. 

p O elemento img é utilizado para adicionar imagens em um documento HTML. 

pp As tabelas são criadas com os elementos table, tr, th, td, thead, tbody, caption, colgroup e col. 
E» Para criar um formulário, devemos utilizar o elemento form. 


p> Basicamente, os campos de um formulário são criados com os elementos input, textarea e 
select. 


> As partes de um documento HTML podem ser definidas com os elementos header, footer, 
article, aside, section, figure, figcaption, div e span. 


E As partes de um documento HTML podem ser separadas com o elemento hr. 


© Prova 


Quem define a linguagem HTML? 


a) Microsoft. 
b) Anatel. 

c) ABNT. 

d) W3C. 


e) NASA. 


O que o elemento DOCTYPE determina? 


a) O tipo do navegador. 
b) O tipo do sistema operacional. 


c) O tipo do documento. 
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d) Otipo do dispositivo. 


e) Nenhuma das anteriores. 


Qual alternativa esta correta? 


a) Araiz de um documento HTML é o elemento body. 

b) O elemento head é colocado no corpo do elemento body. 
c) Oelemento body é colocado no corpo do elemento head. 
d) Araiz deum documento HTML 5 é o elemento html5. 


e) Os elementos head e body são colocados no corpo do elemento html. 


EJ Qual alternativa apresenta um comentário HTML válido? 


a) <!- comentário —> 
b) <* comentario *> 
c) // comentario 

d) /* comentario */ 


e) # comentário 


Qual alternativa está incorreta? 


a) Respeitar a semântica dos elementos HTML facilita o trabalho das ferramentas de busca. 


b) Respeitar a semântica dos elementos HTML facilita o trabalho das ferramentas de leitura de 
tela para deficientes visuais. 


c) Respeitar a semântica dos elementos HTML diminui o tamanho das páginas web. 


d) A semântica dos elementos HTML é definida na especificação da linguagem HTML. 


E Qual alternativa está correta? 


a) Títulos com h2 são mais importantes do que títulos com h1. 
b) Os títulos são definidos com os elementos hl, h2, h3, h4, h5 e h6. 


c) Os títulos são definidos com os elementos h1, h2 e h3. 
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d) Os títulos são definidos com os elementos header1, header2, header3, header4, header5 e 
header6. 


e) O elemento header! equivale ao elemento hl. 


Qual alternativa está correta? 


a) Texto pré-formatado pode ser definido com o elemento text-pre. 

b) O elemento code é utilizado para associar código JavaScript a um documento HTML. 
c) O elemento stronger define textos importantes. 

d) Citações longas são definidas com o elemento blockquote. 


e) Podemos marcar texto com o elemento text-mark. 


Dnm Qual alternativa está correta? 


a) Aslistas com ordem sao definidas através do elemento dl. 

b) Os termos de uma lista de descrições são definidos com o elemento li. 

C) Aslistas com ordem e sem ordem são definidas através dos elementos ul e ol respectivamente. 
d) Os ítens de uma lista com ordem são definidos através do elemento item. 


e) Uma lista pode ser definida dentro de outra lista. 


|9| Qual alternativa está incorreta? 


a) Os links são definidos com o elemento a. 

b) O destino de um link é determinado pelo atributo href. 

c) Odestino de um link com target="_blank" é aberto em uma nova aba ou janela. 
d) O destino de um link com target=" self" é aberto na mesma aba ou janela. 


e) O atributo to define o destino dos links. 


Para exibir um texto quando o mouse passa sobre uma imagem, devemos utilizar qual atributo 
do elemento img? 


a) alt. 
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b) title. 
c) tooltip. 
d) text. 


e) description. 


Qual alternativa contém apenas elementos relacionados as tabelas? 


a) table, td e column. 

b) table, row e col. 

c) table, table-head e table-body. 
d) th, tr e td. 


e) tabular, tr e td. 


Qual alternativa está correta? 


a) As caixas de texto são adicionadas com o elemento input-text. 
b) Os rótulos são definidos com o elemento input-label. 

c) Podemos criar um botão de submit com o elemento input. 

d) As caixas de senha são definidas com o elemento password. 


e) Os checkboxes e os radios sáo criados com os elementos checkbox e radio respectivamente. 


Qual alternativa está correta? 


a) As opções de um drop-down list são definidas com o elemento input. 

b) As opcóes de um drop-down list podem ser agrupadas com o elemento option-group. 
c) O atributo selected do elemento alternative define as opções selecionadas. 

d) Podemos criar um drop-down lista com o elemento drop-down. 


e) Oelemento select é utilizado para criar drop-down lists. 


Qual alternativa está correta? 


a) Os campos de um formulário podem ser agrupados com o elemento inputset. 


138 www.k19.com.br Dd KIS 


139 


HTML 


b) Os campos de um formulário podem ser agrupados com o elemento fieldset. 


c) Oelemento label deve ser utilizado em conjunto com o elemento fieldset. 


d) O elemento legend deve ser utilizado em conjunto com o elemento inputset. 


e) Alegenda de um fieldset é definida através do atributo legend. 


Qual alternativa esta correta? 


a) As sugestões para o autocomplete de um campo são definidas pelos elementos datalist e op- 


tion. 


b) As sugestões para o autocomplete de um campo são definidas através do atributo autocom- 


plete. 


c) O elemento disabled é utilizado para desabilitar campos ou botões. 


d) O atributo off é utilizado para desabilitar campos ou botões. 


e) Campos fixos podem ser definidos com o atributo no-write. 


Minha Pontuação Pontuação Mínima: 


12 


Pontuação Máxima: 


15 
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CAPITULO 


Quando não definimos uma formatação específica para os elementos HTML de uma página web, 


eles sáo exibidos com o estilo determinado pelo navegador utilizado. Há dois problemas principais 
em deixar os navegadores decidirem qual formatação deve ser adotada. O primeiro é que cada na- 
vegador pode adotar uma formatação diferente. Consequentemente, uma mesma página web não 
será exibida exatamente da mesma forma em todos os navegadores. O segundo problema é que as 
formatações adotadas pelos principais navegadores não são “bonitas”. 


Podemos padronizar a forma que as páginas web são exibidas nos diferentes navegadores e obter 


um visual agradável definindo a nossa própria formatação. O estilo das páginas deve ser definido 
com a linguagem CSS (Cascading Style Sheets). 


<=, Mais Sobre 

ig Assim como a linguagem HTML, a linguagem CSS é definida pelo W3C. Vocé pode con- 
sultar a especificação do CSS no endereço http: //www.w3.org/Style/CSS/specs. 

O WSC faz diversas recomendações sobre como implementar as funcionalidades do CSS. Con- 

tudo, nem sempre, os navegadores respeitam essas recomendações e eventualmente cada nave- 

gador adota uma abordagem própria para uma determinada funcionalidade. Essas diferencas 

podem gerar problemas nas páginas web. 


c Mais Sobre 
Nas primeiras versões da linguagem HTML, a formatação era realizada através de atri- 
butos específicos dos elementos. Por exemplo, a cor do fundo de uma página poderia 
ser definida da seguinte forma: 


1 |<body bgcolor="red"> 


Hoje em dia, essa abordagem é totalmente não recomendada. Qualquer alteração visual dos 
elementos HTML deve ser definida através da linguagem CSS. 


‘© Box Model 


Todo elemento HTML, no corpo de uma pagina web, esta contido em um box. Considere o do- 


cumento HTML abaixo. 


1 
2 
3 
4 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
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5 <title>Desenvolvimento Web</title> 

6 </head> 

7 <body> 

8 «hi»Desenvolvimento Web</h1> 

9 

10 <h2>HTML</h2> 

11 <p> 

12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 
13 enim est, ultrices ac vehicula vitae, pharetra id mauris. Quisque sit 
14 amet nisl mollis sem fermentum <strong>accumsan</strong>. 

15 </p> 

16 <a href="#">Mais sobre</a> 

17 

18 <h2>CSS</h2> 

19 <p> 

20 Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Vestibulum 
21 enim est, ultrices ac vehicula vitae, pharetra id mauris. Quisque sit 
22 amet nisl mollis sem fermentum accumsan. 

23 </p> 

24 <a href="#">Mais sobre</a> 

25 </body> 

26 «/html» 


Agora, observe em destaque na imagem a seguir, os boxes correspondentes aos elementos HTML 
do documento anterior. 


[5 localhost/-keizo/html/public html/css/box-model.html 


Desenvolvimento Web 


HTML 


Figura 3.1: Boxes 


Na imagem, os boxes dos block-level elements foram exibidos com linha contínua enquanto os 
boxes dos inline-level elements foram exibidos com linha tracejada. Os boxes dos block-level ele- 
ments ocupam todo o espaco horizontal e provocam quebras de linha. Por outro lado, os boxes dos 
inline-level elements ocupam horizontalmente somente o espaco necessário para o seu conteüdo e 
nao provocam quebras de linha. 


O box de um elemento HTML é composto por conteüdo (content), margem interna (padding), 
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borda (border) e margem externa (margin). 


Figura 3.2: Box model 


Observe que a largura de um box corresponde a soma dos seguintes comprimentos. 


* Margem externa da esquerda (margin-left) 
* Borda da esquerda (border-left) 

* Margem interna da esquerda (padding-left) 
* Largura do conteúdo (width) 

* Margem interna da direita (padding-right) 
* Borda da direita (border-right) 


e Margem externa da direita (margin-right) 
Analogamente, a altura de um box corresponde à soma dos seguintes comprimentos. 


e Margem externa superior (margin-top) 

* Borda superior (border-top) 

e Margem interna superior (padding-top) 

* Altura do conteúdo (height) 

e Margem interna inferior (padding-bottom) 
* Borda inferior (border-bottom) 


* Margem externa inferior (margin-bottom) 


‘© Regras 
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Podemos aplicar regras de formatacáo para cada elemento HTML. Observe a estrutura de uma 
regra CSS. 


Seletor Corpo 


font-size: 40px; 


Propriedade 


Figura 3.3: Estrutura de uma regra CSS 


O seletor determina para quais elementos a regra de formatacáo deve ser aplicada. No corpo de 
uma regra CSS, podemos definir diversas propriedades. Cada propriedade define uma característica 
visual. Por exemplo, a propriedade font-size é utilizada para definir o tamanho da fonte utilizada 
nos textos. 


‘© Aplicando CSS ao HTML 


Podemos aplicar propriedades CSS a elementos HTML de trés maneiras diferentes. 


Inline style 


Podemos aplicar propriedades CSS através do atributo style presente em diversos elementos 
HTML. Essa abordagem nào é recomendada pois o acoplamento entre os elementos HTML e as pro- 
priedades CSS é muito alto dificultando a manutenção das páginas web. 


1|<p (style="color: red" 
2 o 
3 |«/p» 


Internal style sheet 


As regras CSS podem ser definidas no contetido do elemento style. Esse elemento deve ser defi- 
nido dentro do head. 


<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Desenvolvimento Web</title> 
[<style> | 
| pet | 
| color: red; 
| | 
| 


> 
</style> 
</head> 


OON AN FWDNY = 
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External style sheet 


Podemos separar o código HTML do código CSS definido as regras de formatação em um arquivo 
independente. 


1pt 
2 color: red; 


3 |} 


Cédigo CSS 3.1: estilo.css 


Depois de definir as regras CSS em um arquivo separado, ele deve ser associado ao documento 
HTML através do elemento link. 


1 «head» 

2 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
3 <title>Desenvolvimento Web</title> 

4 | <link rel="stylesheet” type="text/css” href="estilo.css"> 

5 |</head> 


‘© Comentarios 


Podemos adicionar comentarios no código CSS através dos marcadores /* e */. 


1|/* uma regra CSS para formatar os parágrafos x/ 
2pt 

3 color: red; 

4 |} 


Código CSS 3.2: estilo.css 


‘© Chrome DevTools 


Como vimos no capítulo anterior, podemos utilizar ferramentas como o Chrome DevTools para 
analisar e modificar os documentos HTML. Essas ferramentas, também podem ser utilizadas para 
editar as propriedades CSS dos elementos de uma página web. Considere o código HTML e o CSS 
abaixo. 


1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 <title>K19 - Chrome DevTools</title> 
5 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
6 <link rel="stylesheet” type="text/css” href="chrome-devtools.css"> 
7 </head> 
8 <body> 
9 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
10 <p class-"classi"»Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
11 </body> 
12 |</html> 
Código HTML 3.6: chrome-devtools.html 
1p { 
2 border: 4px solid red; 
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3 onte size AOne 
4 |} 
5 
6 |.class1 { 
7 color: blue; 
8 border: 10px solid green; 
9j 


Código CSS 3.3: chrome-devtools.css 


Observe a figura abaixo. Através do painel Styles podemos visualizar as regras CSS que foram 
aplicadas a um determinado elemento HTML. Esse painel também mostra a origem dessas regras e 
as dimensóes do box do elemento. 


Styles| Computed Event Listeners DOM Breakpoints Properties 
element.style { Toug Xe 
} 


<p>Lorem ipsum dolor sit amet, consectetur adipiscing pi chrome-devtools.css:1 
elit.</p> border: b4px solid Wired; 
font-size: 20px; 


pi user agent stylesheet 
display: block; 
-webkit-margin-before: lem; 
-webkit-margin-after: lem; 
-webkit-margin-start: 0px; 
-webkit-margin-end: 6px; 


Podemos incluir, remover, desabilitar ou alterar as propriedades de um elemento clicando sobre 
elas no painel Styles. 
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Styles| Computed Event Listeners DOM Breakpoints Properties 


element.style Tog XS 
} 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing pi 


Eee) 4px solid red; 
=Size: 20px; 
} 


chrome-devtools.css:1 
elit.«/p: 


pt user agent stylesheet 
display: block; 
-webkit-margin-before: lem; 
-webkit-margin-after: lem; 
-webkit-margin-start: 0px; 
-webkit-margin-end: 0px; 


Observe na imagem abaixo que o elemento HTML selecionado no painel Styles é afetado por 
duas regras CSS oriundas do arquivo chrome-devtools.css. Repare que a propriedade border é defi- 
nida nessas duas regras. O Chrome DevTools indica através de um traco horizontal qual ocorréncia 
dessa propriedade está sendo desconsiderada. Mais adiante, discutiremos como determinar a prio- 
ridade das regras CSS em situações como essa. 
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Styles| Computed Event Listeners DOM Breakpoints Properties 
element.style { Tog We 
} 


«classi { chrome-devtools.css:6 


color: Miblue; 
en; 
á chrome-devtools.css:1 


border: »>10px solid Wore: 
deeem dem cede B pee 
font-size: 20px; 


«p class="classl">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit.</p> 


pi user agent stylesheet 
display: block; 
-webkit-margin-before: lem; 
-webkit-margin-after: lem; 
-webkit-margin-start: 0px; 
-webkit-margin-end: 6px; 


No painel Computed podemos conferir todas as propriedades CSS que foram aplicadas em um 
elemento. 
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Styles |Computed | Event Listeners DOM Breakpoints Properties 
O Show inherited 


«p class="classl">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit.«/p» 


> border-bottom-color: Erob(o, 128, 0); 
> border-bottom-style: solid; 
> border-bottom-width: 10px; 
b border-image-outset: 0px; 
b border-image-repeat: stretch; 
b border-image-slice: 100%; 
b border-image-source: none; 
> border-image-width: 1; 
> border-left-color: Mirgb(®, 128, 0); 
b border-left-style: solid; 
> border-left-width: 10px; 
> border-right-color: Mirab(®, 128, 0); 
> border-right-style: solid; 
> border-right-width: 10px; 
> border-top-color: Wrgb(0, 128, 0); 
b border-top-style: solid; 
> border-top-width: 10px; 
> color: lrob(e, 0, 255); 
> display: block; 
b font-size: 20px; 
height: 23px; 
width: 864px; 


font-family: Times; 
Times Roman — 56 glyphs 


Se desejarmos visualizar as propriedades que foram herdadas dos elementos ancestrais, pode- 
mos marcar a opcáo Show inherited. 
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Styles |Computed | Event Listeners DOM Breakpoints Properties 
(M Show inherited 


<p class="classl">Lorem ipsum dolor sit amet, consectetur EN 


adipiscing elit.«/p» 


-webkit-animation-delay: Os; 
-webkit-animation-direction: normal; 
-webkit-animation-duration: ; 
-webkit-animation-fill-mode: none; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-name: 
-webkit-animation-play-stat running 
-webkit-animation-timing-function: e 
-webkit-app-region: no-drag; 
-webkit-appearance: none; 
-webkit-backface-visibility: visible 
-webkit-background-clip: border-box; 
-webkit-background-composit source-over 
-webkit-background-origin: padding-box; 
-webkit-background-size: auto; 
-webkit-border-fit: border; 
-webkit-border-horizontal-spacing: 0px; 
-webkit-border-image: none 
-webkit-border-vertical 
-webkit-box-align: stre 
-webkit-box-decoratio 


p Exercícios de Fixacáo 


e Abra o Netbeans e crie um projeto chamado css. 


Importante 

No Windows, utilizando o IIS (Internet Information Services) como Web Server, vocé 

deve salvar o projeto css em C:\inetpub\wwwroot. Lembre-se que é necessário ins- 
talar o IIS conforme vimos anteriormente. 
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Importante 
A No Ubuntu, utilizando o Apache HTTP Server como Web Server, vocé deve salvar o pro- 
jeto css em /home/<USUARIO>/public html. Lembre-se que é necessário instalar 
e configurar o Apache HTTP Server como vimos anteriormente. 


eo NetBeans IDE 7.3 EJ 
a@asve RE DB: —) 


Projects © 


<No Project Open> 


Figura 3.4: Projeto css 
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Steps 
1. Choose Project 
253 at 


— JTY?) 


NetBeans IDE 7.3 n 


Projects: 


> [3 Samples 


Description: 
Creates a new HTMLS application configured for HTML, CSS and JavaScript. 


3 
r4 


(Chep ) (<e ) GD) (Finish | (cancer) 


Figura 3.5: Projeto css 


000 


ns DEC. 


Steps 


1. Choose Project 

2. Name and Location 
3. Site Template 

4. JavaScript Files 


J TY» B 


NetBeans IDE 7.3 


: Search (36 I) 8) 


w E O] 


Project Folder: /Users/keizo/Sites/css R 


Figura 3.6: Projeto css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacaol.zip 


152 


www.k19.com.br 


153 CSS 


e No projeto css, crie um arquivo chamado css.html. Todos os parágrafos desse documento devem 
ser exibidos em negrito, com cor azul e com fonte 20px. Defina uma regra CSS para formatar os 
parágrafos. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>CSS</title> 

6 <style type="text/css"> 

7 p { 

8 font-weight: bold; 

9 font-size: 20px; 

10 color: #0000FF; 

11 j 

12 </style> 

13 </head> 

14 <body> 

15 <p>Um paragrafo formatado</p> 

16 <p>Outro paragrafo formatado</p> 
17 </body> 

18 |</html> 


Código HTML 3.7: css.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao2.zip 


[3] No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/css/public html/css.html 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/~<USUARIO>/css/public_html/css. html. 


o Para organizar melhor o conteúdo e a formatação da página criada anteriormente, crie um ar- 
quivo CSS chamado style.css no projeto css. 


pO 
font-weight: bold; 
font-size: 20px; 
color: #0000FF; 


OU 0nP.y— 


Código CSS 3.4: style.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao4.zip 


Q Modifique o arquivo css.html para aplicar as regras de formatacáo criadas no exercício anterior. 


«IDOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>CSS</title> 
| <link rel="stylesheet” type="text/css" href="style.css"> 
</head> 
<body> 
<p>Um paragrafo formatado</p> 
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10 <p>Outro paragrafo formatado</p> 
11 </body> 
12 |</html> 


Código HTML 3.8: css.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao5.zip 


‘© Cores 


Ha diversas formas de escolher uma cor na linguagem CSS. 


Nome 


A especificação da linguagem CSS nomeou 147 cores. Você pode verificar a lista desses nomes 
no endereço http: //www.w3.org/TR/css3-color/#svg-color. As cores básicas do CSS são: aqua, 
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow. 


Hexadecimal 


A quantidade de cores suportada pela linguagem CSS é 16.777.216. Como vimos apenas 147 co- 
res foram nomeadas. Para escolher uma cor que não possui um nome, podemos utilizar o código 
hexadecimal da cor desejada. Todas as cores possuem um código hexadecimal. Veja o código hexa- 
decimal das cores básicas. 


código hexadecimal | nomedacor | cor código hexadecimal | nome da cor | cor 
#00FFFF aqua a #000080 navy A 
#000000 black ^ #808000 olive a 
#0000FF blue A #800080 purple a 
#FFOOFF fuchsia A #FF0000 red A 
#808080 gray A #COCOCO silver 

#008000 green a #008080 teal a 
#00FF00 lime & #FFFFFF white 

#800000 marron A #FFFF00 yellow à 


O código hexadecimal de uma cor começa com o caractere 4. Os dois primeiros dígitos definem 
a quantidade de vermelho, os dois dígitos do meio definem a quantidade de verde e os dois últimos 
dígitos definem a quantidade de azul. 


Função rgb() 


A função rgb() devolve uma cor a partir de uma quantidade de vermelho, de verde e de azul. 
Essas quantidades podem ser definidas em porcentagem ou em valores inteiros de O a 255. Veja 
como podemos obter as cores básicas a partir da função rgb(). 
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rgb() nome dacor | cor rgb() nome dacor | cor 
rgb(0, 255, 255) aqua A rgb(0, 0, 128) navy & 
rgb(0, 0, 0) black a rgb(128, 128, 0) olive A 
rgb(0, 0, 255) blue A rgb(128, 0, 128) purple a 
rgb(255, 0, 255) fuchsia $ rgb(255, 0, 0) red A 
rgb(128, 128, 128) | gray a rgb(192, 192, 192) | silver 

rgb(0, 128, 0) green e rgb(0, 128, 128) teal A 
rgb(0, 255, 0) lime a rgb(255, 255, 255) | white 

rgb(128, 0, 0) marron a rgb(255, 255, 0) yellow a 


Funcáo rgba() 


A função rgba() é muito semelhante à função rgb(). A diferença é que a função rgba() possui um 
quarto parâmetro que define a opacidade da cor. O valor desse parâmetro deve ser maior ou igual a 
0 e menor ou iguala 1. Por exemplo, para definir a cor blue com 50% de opacidade, podemos utilizar 
a função rgba() com os seguintes parâmetros. 


= 


reba(0, O, 255, 


0.5) 


Função hsl() 


Podemos usar a escala HSL (Hue, Saturation and Lightness ou Matiz, Saturação e Brilho) para 
selecionar uma cor através da função hsl(). Essa função recebe 3 parâmetros. O primeiro deve ser 
um valor inteiro de 0 até 360. O segundo e o terceiro são porcetagens. 


=i 


hs1(180, 


50%, 60%) 


Funcáo hsla() 


Assim como a função hsl(), a função hsla() também permite a seleção das cores através da escala 
HSL. A diferença é que a última permite que a opacidade da cor seja definida. 


= 


hsla(180, 


50%, 60%, 


0.5) 


‘© Unidades de medida 


Para definir um tamanho ou uma distancia, devemos utilizar as unidades da linguagem CSS. 
Podemos classificar essas unidades em absolutas e relativas. 


Unidades absolutas 
cm centimetro 
mm milimetro 
in polegada 
pt ponto (1 pt é igual a 1/72 in) 
pc pica (1 pc é igual a 12 pt) 
px pixel 
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Apesar de ser considerada absoluta, a unidade px depende da resolucáo e do tamanho da tela. 
Por exemplo, considere uma tela de 15 polegadas com resolução 1920x1080 e outra de 14 polegadas 
com resolucáo 1024x768. Na primeira tela, 1 px é igual a 0,172 mm. Na segunda tela, 1 px equivale a 
0,277 mm. 


Unidades relativas 

em 1 em é igual ao tamanho da fonte do elemento onde essa unidade for utili- 
zada. 

ex Geralmente, 1 ex é igual a altura da letra “x” da fonte atual. 
ch Geralmente, 1 ch é igual a largura do dígito "0" da fonte atual. 
rem 1 rem é igual ao tamanho da fonte do elemento raiz do documento HTML. 
vw 1 vw é igual a 1% da largura da área de visualização do navegador (viewport). 
vh 1 vh é igual a 1% da altura da área de visualização do navegador (viewport). 
vmin 1 vmim é igual ao valor mínimo entre vw e vh. 
vmax 1 vmim é igual ao valor máximo entre vw e vh. 


‘© Backgrounds 


Podemos definir a formatação do background de um elemento HTML com as seguintes proprie- 
dades CSS: 
background-color 


A propriedade background-color é utilizada para definir a cor do background dos elementos 
HTML. 


color Uma cor CSS. 
transparent Faz o background ser transparente (padrão). 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 


—— background-color: yellow 


IK19 Treinamentos ——> background-color: transparent 


background-image 


A propriedade background-image é utilizada para definir a imagem que deve ser utilizada como 
background de um elemento HTML. 


url url) URL da imagem de background. 
none Sem imagem de background (padrão). 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 
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Lorem ipsum oer N amet, cons 


adipiscing elit. Nunc iaculis pha 
felis elementum mollis. Integer i 
luctus ante quis consectetur. 


———- background-image: url('bg-image.png') 


2 Mais Sobre 

iy Podemos definir mültiplas imagens de background. As URLs dessas imagens devem 
ser separadas por vírgula. As imagens sáo sobrepostas sendo que a primeira ficará no 

primeiro plano, a segunda no segundo plano e assim por diante até a ultima que ficará no ültimo 

plano. 


1 |background-image: url("imageml.png"),url("imagem2.png"),url("imagem3.png"); 


background-repeat 


Por padrao, se uma imagem utilizada como background for menor do que o box do elemento 
HTML correspondente, ela sera replicada na horizontal e na vertical. A propriedade background- 
repeat permite controlar como essa replicação deve ser realizada. Essa propriedade aceita os se- 
guintes valores: 


repeat A imagem de background é replicada na horizontal e na vertical (padrão). 
repeat-x A imagem de background é replicada apenas na horizontal. 

repeat-y A imagem de background é replicada apenas na vertical. 

no-repeat A imagem não é replicada. 

inherit Assume o valor da mesma propriedade no elemento HTML pai. 


background-repeat: repeat background-repeat: repeat-x 
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background-repeat: repeat-y background-repeat: no-repeat 


background-attachment 


A propriedade background-attachment permite definir qual é comportamento dos backgrounds 
em relacáo a rolagem do conteüdo. 


scroll O background acompanha a rolagem do conteúdo (padrão). 
fixed O background não acompanha a rolagem do conteúdo. 


background-attachment: fixed 


^ 
ww 
background-attachment: scroll 


background-position 


Para derterminar a posição das imagens utilizadas como background dos elementos HTML, de- 
vemos utilizar a propriedade background-position. 


left top Canto superior esquerdo (padrão). 

center top Centralizado horizontalmente no topo. 

right top Canto superior direito. 

left center Do lado esquerdo centralizado verticalmente. 
center center Centralizado horizontalmente e verticalmente. 
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right center 
left bottom 
center bottom 
right bottom 
left 

center 

right 

top 

bottom 

x% y% 


x% 
medidal medida? 


inherit 


left top 


Do lado direito centralizado verticalmente. 

Canto inferior esquerdo. 

Centralizado horizontalmente na base. 

Canto inferior direito. 

O mesmo que "left center”. 

O mesmo que "center center”. 

O mesmo que "right center”. 

O mesmo que "center top”. 

O mesmo que "center bottom". 

O valor x corresponde à posição horizontal e o y à posição vertical. Eles são 
relativos ao canto superior esquerdo. 

O mesmo que "x% 50%". 

A medidal corresponde à posicáo horizontal e a medida2 a posicáo vertical. 
Elas sao relativas ao canto superior esquerdo. 

Assume o valor da mesma propriedade no elemento HTML pai. 


LOL 


center top right top 


left center 


center center right center 


1 33 


left bottom 


center bottom right bottom 
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background-clip 


A propriedade background-clip determina qual área do box de um elemento HTML deve ser 
afetada pela propriedade background-color. 


border-box Área delimitada pelas bordas (padrão). 
padding-box Área delimitada pelas margens internas. 
content-box Área delimitada pelo conteúdo. 


— background-clip: border-box 


—— —» background-clip: padding-box 


—— background-clip: content-box 


background-origin 


A propriedade background-origin determina onde ficará o ponto de origem para o posiciona- 
mento das imagens utilizadas como background. 
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border-box Canto superior esquerdo da area delimitada pelas bordas. 
padding-box Canto superior esquerdo da área delimitada pelas margens internas (padrão). 
content-box Canto superior esquerdo da área delimitada pelo conteüdo. 


ev mmm 


e 
ipsum dolor sit amet, consec- 


a 
| 
adipiscing elit. Nunc iaculis I 
tra felis elementum mollis. | 
ger iaculis luctus ante quis background-origin: border-box; 
consectetur. Pellentesque a libero E background-repeat: no-repeat; 
ultrices, varius nibh eu, ullamcorper | 
nunc. Sed iaculis congue dui nec 
iaculis. Ut sagittis nec tortor quis i 
| 
Ed 


= 
fl 
ipsum dolor sit amet, consec- ü 
dipiscing elit. Nunc iaculis 
a felis elementum mollis. | 
r iaculis luctus ante quis background-origin: padding-box; 
consectetur. Pellentesque a libero i background-repeat: no-repeat; 
ultrices, varius nibh eu, ullamcorper | 
nunc. Sed iaculis congue dui nec E 
jaculis. Ut sagittis nec tortor quis 

I 

EH 


ápgim dolor sit amet, consec- 
cing elit. Nunc iaculis 
lis elementum mollis. 
ulis luctus ante quis 
Pellentesque a libero 
ultrices, varius nibh eu, ullamcorper 
nunc. Sed iaculis congue dui nec 
iaculis. Ut sagittis nec tortor quis 


background-origin: content-box; 
background-repeat: no-repeat; 


background-size 


Quando uma imagem é utilizada como background de um elemento HTML, podemos definir o 
tamanho dessa imagem com a propriedade background-size. 


auto auto Tamanho original da imagem (padrão). 

auto O mesmo que "auto auto". 

medida auto A medida corresponde à largura. A altura é calculada de forma proporcional 
à largura. 

auto medida A medida corresponde à altura. A largura é calculada de forma proporcional 
à altura. 
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medidal medida? 
x% y96 


x% auto 


auto y% 


cover 


contain 


consectetur. Pellentesque a libero 


A medidal corresponde à largura e a medida2 à altura. 

O valor x corresponde à largura e o y à altura. Esses valores sáo porcetagens 
relativas à dimensáo do elemento HTML. 

O valor x corresponde à largura. Esse valor é uma porcentagem relativa à 
largura do elemento HTML. A altura é calculada automaticamente de forma 
proporcional a largura. 

O valor y corresponde à altura. Esse valor é uma porcentagem relativa à al- 
tura do elemento HTML. A largura é calculada automaticamente de forma 
proporcional a altura. 

Aimagem de background é redimensionada proporcionalmente de tal forma 
a cobrir toda a área do elemento HTML. 

Aimagem de background é redimensionada proporcionalmente de tal forma 
ater o maior tamanho possível sem extrapolar a área do elemento HTML. 


Or sit amet, consec- 
elit. Nunc iaculis 
lementum mollis. 


luctus ante quis —» background-size: 50% 50% 


ultrices, varius nibh eu, ullamcorper 
nunc. Sed iaculis congue dui nec 
iaculis. Ut sagittis nec tortor quis 


———» background-size: cover 


sit amet, consec- 

it. Nunc iaculis 
lementum mollis. 
luctus ante quis 
ntesque a libero 
bh eu, ullamcorper 
is congue dui nec 
is nec tortor quis 


——» background-size: contain 
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background 


A propriedade background é um atalho para as outras propriedades de background. A sintaxe 
dessa propriedade é: 


background: color position size repeat origin clip attachment image; 


(> Exercicios de Fixacáo 


Q No projeto css, crie um arquivo chamado backgrounds.html. 


= 3 oo E EE 
OFPWN HH COO AN DUO FWDNY = 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - Backgrounds</title> 
<link rel="stylesheet” type="text/css” href="backgrounds.css"> 
</head> 
<body> 
<div id="divl"></div> 
<div id="div2"></div> 
<div id="div3"></div> 
<div id="div4"></div> 
<div id="div5"></div> 
</body> 
</html> 


Código HTML 3.9: backgrounds.html 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-css-fixacao6. zip 


Q No projeto css, crie um arquivo CSS chamado backgrounds.css. 


a ao + ma 


oo N ONR UNS oO (000-1001 4» 00h50 >=> 


Ay 


25 
26 


Civ 
width: 200px; 
height: 100px; 
margin: 10px; 
border: 5px black dashed; 


} 

#divl { 
background-color: yellow; 

y 

#div2 { 
background-color: #cla4cd; 
background-clip: padding-box; 

} 

#div3 { 
background-image:url("http://k19.com.br/figs/seguro-treinamento. png”); 
background-repeat: no-repeat; 

B 

#div4 { 
background-image:url("http://k19.com.br/figs/seguro-treinamento. png”); 
background-repeat: no-repeat; 
background-origin: border-box; 

B 
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27 
28 |#div5 { 

29 background-image:url("http://k19.com.br/figs/seguro-treinamento. png”); 
30 background-repeat: no-repeat; 

31 background-size: contain; 

32 |} 
33 
34 |body { 

35 background-image: url ("http://k19.com.br/figs/main-header-logo. png”); 
36 background-repeat: no-repeat; 

37 background-attachment: fixed; 

38 background-position: top center; 

39 |) 


Código CSS 3.10: backgrounds.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao7.zip 
Q No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/backgrounds. html 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/~<USUARIO>/css/public_html/backgrounds. html. 


‘© Textos 


Podemos controlar a formatação dos textos contidos nos documentos HTML com as seguintes 
propriedades CSS. 


color 


Podemos definir a cor do texto contido em um elemento HTML através da propriedade color. 


1p {í 
2 color: blue; 
3 5 
color Uma cor CSS. 
inherit Assume 0 valor da mesma propriedade no elemento HTML pai. 
text-align 


O alinhamento do texto contido em um elemento HTML pode ser determinado com a proprie- 
dade text-align. 


left Alinhado à esquerda (padrão). 
right Alinhado à direita. 

center Centralizado. 

justify Justificado. 
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inherit 


Lorem ipsum dolor 
sit amet, consectetur 
adipiscing elit. Cras 


vehicula bibendum 
arcu sit amet lacinia. 
Sed dui nulla. 


left 


text-decoration 


Lorem ipsum dolor 
sit amet, consectetur 
adipiscing elit. Cras 
vehicula bibendum 
arcu sit amet lacinia. 
Sed dui nulla. 


center 


Lorem ipsum dolor 
sit amet, consectetur 
adipiscing elit. Cras 

vehicula bibendum 
arcu sit amet lacinia. 

Sed dui nulla. 


right 


Assume 0 valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor 
sit amet, consectetur 
adipiscing elit. Cras 
vehicula bibendum 
arcu sit amet lacinia. 
Sed dui nulla. 


justify 


Podemos definir a decoração dos textos contidos em um elemento HTML com a propriedade 
text-decoration. 


none 


underline 
overline 
line-through 
inherit 


Texto sem decoração (padrão). 


Texto com traco inferior. 
Texto com traco superior. 
Texto riscado. 


Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. ——> 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. ——> 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. ——> 


i ; ti TE A 


text-transform 


text-decoration: 
text-decoration: 
text-decoration: 


text-decoration: 


none 
underline 
overline 


line-through 


A capitalizacáo dos textos pode ser determinada através da propriedade text-transform. 


Texto normal (padrão). 


none 


capitalize 

uppercase 
lowercase 
inherit 


Lorem ipsum dolor sit amet. Consectetur adipiscing elit. ——» 


Lorem Ipsum Dolor Sit Amet. Consectetur Adipiscing. 


— 


LOREM IPSUM DOLOR SIT AMET. CONSECTUR. —> 


lorem ipsum dolor sit amet, consectetur adipiscing elit. 


Todas as letras do texto seráo transformadas em maiüsculas. 
Todas as letras do texto seráo transformadas em minüsculas. 
Assume o valor da mesma propriedade no elemento HTML pai. 


text-transform: 
text-transform: 
text-transform: 


text-transform: 


A primeira letra de cada palavra será transformada em maiüscula. 


none 
capitalize 
uppercase 


lowercase 
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text-indent 


Normalmente, indentamos a primeira linha de um bloco de texto. Podemos definir o compri- 
mento dessa indentação através da propriedade text-indent. 


medida A medida corresponde ao tamanho da indentação. 

x% O valor x é o tamanho da indentação em porcentagem relativa à largura do ele- 
mento HTML pai. 

inherit Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur 
elit. Cras vehicula bibendum arcu. adipiscing elit. Cras vehicula bibendum arcu. 
Sed dui nulla, cursus et lacinia eu, vulputate ac Sed dui nulla, cursus et lacinia eu, vulputate ac 


dolor. dolor. 
Quisque faucibus congue congue. Quisque faucibus congue congue. 


text-indent: 0 text-indent: 20px 


letter-spacing 


O espacamento entre as letras pode ser determinado através da propriedade letter-spacing. 


normal Espaçamento padrão definido para a fonte utilizada (padrão). 

medida A medida corresponde ao espaçamento extra desejado. Esse valor pode ser nega- 
tivo. 

inherit Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet. Consectetur adipiscing elit... ——» letter-spacing: normal 
Lorem ipsum dolor sit amet... ——- letter-spacing: 10px 


Lorem ipsum dolor sit amet, consectetur adipiscing elit Aeneanmatsnam.. ——> letter-spacing: -2px 


word-spacing 


O espacamento entre as palavras pode ser determinado com a propriedade word-spacing. 


normal Espaçamento padrão definido para a fonte utilizada (padrão). 

medida A medida corresponde ao espaçamento extra desejado. Esse valor pode ser nega- 
tivo. 

inherit Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet. Consectetur adipiscing elit... ——> word-spacing: 0 
Lorem ipsum dolor sit amet. Consectetur adipisc... ——» word-spacing: 4px 


Lorempsudolsim éfonsectetadipisciedRellentesqmmortoncid... ——» word-spacing: -4px 
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word-wrap 


Podemos controlar, através da propriedade word-wrap, como as palavras sao divididas quando 
ocorre uma quebra de linha automática. 


normal As palavras são divididas apenas nos “pontos de quebras” definidos com o ele- 
mento wbr (padrão). 
break-word As palavras podem ser divididas em qualquer ponto. 


Otorrinolaringologista. Otorrinolaringo 


logista. 


word-wrap: normal word-wrap: break-word 


line-height 


A altura das linhas de um texto pode ser determinada com a propriedade line-height. 


normal Altura padrão de linha (padrão). 

x A altura das linhas é o produto do valor x pelo tamanho da fonte atual. 

medida A medida corresponde à altura das linhas. 

x% O valor x é a altura das linhas em porcentagem relativa ao tamanho da fonte atual. 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Cras vehicula bibendum arcu. 
Sed dui nulla, cursus et lacinia eu, vulputate ac elit. Cras vehicula bibendum arcu. 


dolor. 


Quisque faucibus congue congue. Sed dui nulla, cursus et lacinia eu, vulputate ac 


line-height: normal line-height: 20px 


white-space 


É possível controlar a forma de tratamento dos espaços em branco e das quebras de linha através 
da propriedade white-space. Os valores possíveis para essa propriedade são: 


normal Sequências de espaços em branco contidas no código HTML são tratadas como um 
único espaço. As quebras de linha contidas no código HTML não geram quebras de 
linha na página renderizada. Quebras de linha automáticas são inseridas quando 
necessário (padrão). 
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nowrap Sequéncias de espaços em branco contidas no código HTML são tratadas como um 


pre 


unico espaco. As quebras de linha contidas no código HTML nao geram quebras 
de linha na página renderizada. Nenhuma quebra de linha é inserida automatica- 
mente. 

Sequéncias de espaços em branco são completamente consideradas. As quebras 
de linha contidas no código HTML geram quebras de linha na página renderizada. 
Nenhuma quebra de linha é inserida automaticamente. 


pre-line Sequências de espaços em branco contidas no código HTML são tratados como 


um único espaço. As quebras de linha contidas no código HTML geram quebras de 
linha na página renderizada. Quebras de linha automáticas são inseridas quando 
necessário. 


pre-wrap Sequências de espaços em branco são completamente consideradas. As quebras 


de linha contidas no código HTML geram quebras de linha na página renderizada. 
Quebras de linha automáticas são inseridas quando necessário. 


inherit Assume o valor da mesma propriedade no elemento HTML pai. 


HTML 


<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula 
bibendum arcu. 


Sed dui nulla, cursus et lacinia eu, vulputate ac dolor. 
Quisque faucibus congue congue.</div> 


Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Cras vehicula bibendum 
arcu. Sed dui nulla, cursus et lacinia eu, 
vulputate ac dolor. Quisque faucibus 
congue congue. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. 


white-space: normal white-space: nowrap 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula bibendum arcu. 


Sed dui nulla, cursus et lacinia eu, vulputate ac dolor. 
Quisque faucibus congue congue. 


white-space: pre 


Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, 
adipiscing elit. Cras vehicula bibendum consectetur adipiscing elit. Cras vehicula 
arcu. bibendum arcu. 


Sed dui nulla, cursus et lacinia eu, Sed dui nulla, cursus et lacinia 
vulputate ac dolor. eu, vulputate ac dolor. 
Quisque faucibus congue congue. Quisque faucibus congue congue. 


white-space: pre-line white-space: pre-wrap 
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text-shadow 


Para adicionar uma sombra no texto de um elemento HTML, devemos utilizar a propriedade 
text-shadow. Para usar essa propriedade, devemos definir as seguintes informações sobre a sobra 
desejada: a posicáo horizontal, a posicáo vertical, o raio do blur e a cor. 


Deslocamento Esmaecimento 
a “A 
text-shadow: TUE 10px 355g IRERFURS #££0000 
Deslocamento Cor 
horizontal (opcional) 


Várias sombras podem ser aplicadas ao texto de um elemento HTML. As informações que defi- 
nem essas sombras devem ser separadas por vírgula. 


text-shadow: |10px 10px 10px #ff0000|, |-10px -10px 10px #0000ff 
Texto Texto 


text-shadow: 10px 10px #ff0000 text-shadow: 10px 10px 10px #ff0000 
text-shadow: -10px -10px #ff0000 text-shadow: -10px -10px 10px #ff0000 


Texto Texto 


text-shadow: 0 0 10px #ff0000 text-shadow: 10px 10px 10px #ff0000, 
-10px -10px 10px #0000ff 


Outras propriedades 


A linguagem CSS define mais algumas propriedades de formatação de texto. 


e unicode-bdi 

e hanging-punctuation 
e punctuation-trim 

e text-align-last 

e text-justify 

e text-outline 

e text-overflow 

e text-wrap 


* direction 
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e word-break 


Eu Exercícios de Fixação 


[9] No projeto css, crie um arquivo chamado textos.html. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 


charset=UTF -8"> 


«meta http-equiv-"Content-Type" 


content="text/html; 


<title>K19 


- Textos</title> 


<link rel="stylesheet” type="text/css” href="textos.css"> 
</head> 
<body> 
«p id="p1"> 
Lorem ipsum dolor sit amet, 
vehicula bibendum arcu sit amet lacinia. 
</p> 
<p id="p2"> 
Otorrinolaringologista. 
</p> 
<p id="p3"> 
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Cras vehicula 
bibendum arcu. 
Sed 
dui nulla, 


consectetur adipiscing elit. 
Sed dui nulla. 


à A mA AE a vx 


à 


à 
OANA NT C0 N2—0o (000-10 Ui AUN 


à 


N N 
o 


cursus et lacinia eu, vulputate ac dolor. 


N N 
w N 


Quisque faucibus congue congue. 
</p> 
<p id="p4"> 
Jonas Hirata. 
</p> 
</body> 
</html> 


NNNNN DN 
OANA UO A 


Cras 


Código HTML 3.10: textos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao9.zip 


O No projeto css, crie um arquivo CSS chamado textos.css. 


Dat 
border: 2px black solid; 


} 


#p1 { 
width: 400px; 
color: blue; 
text-align: justify; 
text-decoration: line-through; 
text-transform: uppercase; 
text-indent: 20px; 
letter-spacing: 2px; 
line-height: 25px; 
word-spacing: 11px; 


à 


à 


à 


à 


à 


} 


à 


à 


#p2 ( 
width: 100px; 
word-wrap: break-word; 


à 


à 
«(O 0o 4100143» 00 N2— 0c to00 4001 3» 00 n0 — 


à 
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20 |} 

21 

22 |#p3 ( 

23 width: 400px; 

24 white-space: pre-line; 

25 |} 

26 

27 |#p4 { 

28 width: 1100px: 

29 text-transform: uppercase; 

30 letter-spacing: 5px; 

31 text-shadow: 2px 2px #ff0000; 
32 |} 


Cédigo CSS 3.12: textos.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao10.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/css/public html/textos.html 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<USUARIO>/css/public_html/textos. html. 


‘© Fontes 


Podemos controlar as fontes utilizadas nos textos de uma pagina web com as seguintes proprie- 
dades. 


font-family 


Uma lista com as fontes desejadas ordenadas por prioridade pode ser determinada através da 
propriedade font-family. 


1 font-family: "Arial Black", "Georgia", "Courier New"; 


Eventualmente, uma determinada fonte pode não estar disponível. Os navegadores devem uti- 
lizar a primeira fonte disponível da lista definida com a propriedade font-family. Por isso, essa lista 
deve ser ordenada da fonte com maior prioridade para a fonte com menor prioridade. 


Algumas fontes são consideradas seguras (Web Safe Fonts). Essa qualidade é atribuída às fontes 
que são suportadas em praticamente todos os sistemas operacionais e navegadores. Uma lista com 
essas fontes pode ser consultada no endereço http: //cssfontstack.com/. 


A linguagem CSS classifica as fontes em 5 grupos genéricos: 

e serif: Fontes serifadas. Os acabamentos nas extremidades das hastes das letras são denomina- 
dos serifas. 

* sans-serif: Fontes não serifadas. 


¢ cursive: Fontes com estilo semelhante à escrita manual. 
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* fantasy: Fontes que possuem caracteres com decorações. 


* monospace: Fontes que possuem caracteres com largura exatamente igual. 


Verdana OPTIMUS PRINCEPS — Unispace Wow Conplo Nest waztel 


Sans-serif 


Serif Monospace Cursive Fantasy 


Helvetica Times New Roman Courier New 4, Moe Comic Sans 


Sans-serif 


Serif Monospace Cursive Fantasy 


Se qualquer fonte de um determinado grupo genérico pode ser utilizada, devemos adicionar o 
nome desse grupo na lista definida com a propriedade font-family. Nesse caso, os próprios navega- 
dores escolhem uma fonte do grupo genérico escolhido. 


1 |font-family: 


“Arial Black, “Georgia “Courier New"), sans-serif“; 


No exemplo acima, se as fontes “Arial Black”, "Georgia" e “Courier New” não estiverem disponí- 
veis, os navegadores utilizarão alguma fonte do grupo sans-serif. 


font-size 


O tamanho da fonte é determinado através da propriedade font-size. 


xx-small 
x-small 
small 
medium 
large 
x-large 
xx-large 
smaller 
larger 
medida 
x% 


inherit 


Tamanho de fonte extra extra pequeno. 

Tamanho de fonte extra pequeno. 

Tamanho de fonte pequeno. 

Tamanho de fonte médio (padrão). 

Tamanho de fonte grande. 

Tamanho de fonte extra grande. 

Tamanho de fonte extra extra grande. 

Um tamanho de fonte menor do que o do elemento HTML pai. 
Um tamanho de fonte maior do que o do elemento HTML pai. 
A medida corresponde ao tamanho da fonte. 

O valor x é o tamanho da fonte. Esse valor é uma porcentagem do tamanho da 
fonte do elemento HTML pai. 

Assume o valor da mesma propriedade no elemento HTML pai. 
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9px —— —» K19 Treinamentos 
xx-small ——» K19 Treinamentos 
x-small —» K19 Treinamentos 
small ——» K19 Treinamentos 
medium ——> K19 Treinamentos 


large —> K19 Treinamentos 
x-large —> K19 Treinamentos 
«ia — K19 Treinamentos 


font-style 


Podemos determinar o estilo da fonte através da propriedade font-style. 


normal Fonte normal (padrão). 

italic Fonte itálica. 

oblique Fonte oblíqua. 

inherit Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. ——» font-style: normal 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ——» font-style: italic 


Lorem ipsum dolor sit amet, consectetur adipiscing elt, ——> font-style: oblique 


font-variant 


Para determinar que o texto de um elemento HTML deve ser exibido em small caps, devemos 
utilizar a propriedade font-vaiant. Todas as letras de um texto em small caps sáo transformadas em 
maiúsculas e o tamanho da fonte da primeira letra de cada palavra é maior do que o tamanho da 
fonte das demais letras. 


normal Fonte normal (padrão). 
small-caps Fonte em small caps. 
inherit Assume 0 valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. —— font-variant: normal 


LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING E... ——» font-variant: small-caps 


4) K | 9 www.facebook.com/k1 9treinamentos 173 


CSS 


174 


font-weight 


A grossura dos caracteres pode ser definida com a propriedade font-weight. 


Uma grossura maior do que a do elemento HTML pai. 


normal Grossura normal (padrão). 

bold Negrito. 

100 Grossura 100. 

200 Grossura 200. 

300 Grossura 300. 

400 Grossura 400. Equivale ao valor “normal” 
500 Grossura 500. 

600 Grossura 600. 

700 Grossura 700. Equivale ao valor “bold” 
800 Grossura 800. 

900 Grossura 900. 

bolder 

lighter 

inherit 


Uma grossura menor do que a do elemento HTML pai. 
Assume o valor da mesma propriedade no elemento HTML pai. 


A Importante 


Normalmente, as fontes não definem uma grossura diferente para cada um dos possí- 
veis valores da propriedade font-weight. Por isso, geralmente, dois ou mais valores sáo 
mapeados para a mesma grossura de fonte. 


font 


font-weight 


Fonte utilizada: 


Roboto 


http://google.com/fonts/specimen/Roboto 


Curiosidade: 

A fonte Roboto é a fonte padrão 
utilizada nos sistemas Android a partir 
da versão 4.0. 


K19 Treinamentos 
K19 Treinamentos 
K19 Treinamentos 


K19 Treinamentos 
K19 Treinamentos 
K19 Treinamentos 
K19 Treinamentos 
K19 Treinamentos 
K19 Treinamentos 
K19 Treinamentos 


K19 Treinamentos 


font-weight: 
font-weight: 
font-weight: 
font-weight: 
font-weight: 
font-weight: 
font-weight: 
font-weight: 
font-weight: 
font-weight: 


font-weight: 


A propriedade font é um atalho para as outras propriedades de fonte. 
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1 |font: font-style font-variant font-weight font-size/line-height font-family; | 


@font-face 


A regra @font-face permite utilizar uma fonte mesmo que ela não esteja disponível no sistema 
operacional do usuário. A fonte pode estar em um arquivo local (máquina do usuário) ou remoto 
(servidor). Para cada fonte que deve ser adicionada, devemos definir uma regra font-face. Os na- 
vegadores carregam as fontes sob demanda, ou seja, somente se elas forem necessárias. Veja um 
exemplo de utilização dessa regra. 


1 |@font-face { 

2 font-family: K197; 

3 sre: url(’http://www.k19.com.br/fonts/K19.woff’); 
4 |} 


A função url( deve ser utilizada quando queremos uma fonte que está armazenada remota- 
mente. Para carregar uma fonte disponível na máquina do usuário, devemos utilizar a função local(), 
passando como parâmetro o nome da fonte desejada. 


1 |@font-face { 

2 font-family: ’NomeDaFonte’; 
3 src: local(’nome-da-fonte’); 
4 |} 


Para utilizar as fontes definidas na regra @font-face, basta definir a a propriedade font-family. 


1 font-family: 'NomeDaFonte'; 


Os formatos de fonte suportados pelos navegadores variam de navegador para navegador. Em 
uma regra font-face, podemos indicar a mesma fonte em vários formatos para suportar diversos 
navegadores. 


1 |@font-face { 

2 font-family: ’NomeDaFonte’; 

3 src: url('nome-da-fonte.eot'); /*x IE9 x/ 

4 src: url(’nome-da-fonte.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 x/ 
5 url('nome-da-fonte.woff') format(’woff’), /* Navegadores Modernos x/ 

6 url('nome-da-fonte.ttf') format(’truetype’), /* Safari, Android, iOS */ 

7 url(’nome-da-fonte.svg#webfontregular’) format(’svg’); /* iOS antigos x/ 

8 |} 


O suporte dos navegadores aos diversos formatos de fonte esta constantemente evoluindo. Ha 
diversos sites que informam de maneira atualizada quais formatos sáo suportados por cada navega- 
dor. Recomendamos o site Can I use (http: //caniuse.com/). 


Existem diversos repositórios de fontes pagas e/ou gratuitas. Podemos utilizar as fontes des- 
ses repositórios através da regra font-face. Um dos repositórios mais importantes é o Google Fonts 
(http: //www.google.com/fonts). 


Outras propriedades 


A linguagem CSS define mais algumas propriedades de formatação de fonte. 


* font-size-adjust 
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* font-stretch 


(> Exercícios de Fixacáo 


(12) No projeto css, crie um arquivo chamado fontes.html. 


X zd 4 c x xa à 


š 


à 
«(oO c 4001 00 N2— CHO ANDO 3» 00 N20 — 


à 


N 
e 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - Fontes</title> 
<link rel=’stylesheet’ type=’text/css’ 
href=’http://fonts.googleapis.com/css?family=Butcherman ’ > 
<link rel="stylesheet” type="text/css” href="fontes.css"> 
</head> 
<body> 
«p id="p1"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras 
vehicula bibendum arcu sit amet lacinia. Sed dui nulla. 
</p> 
<p id="p2"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras 
vehicula bibendum arcu sit amet lacinia. Sed dui nulla. 
</p> 
</body> 
</html> 


Código HTML 3.11: fontes.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao12.zip 


o No projeto css, crie um arquivo CSS chamado fontes.css. 


LA CN E Nr 
NOP C.N («500-4001 PWD >=> 


pt 
border: 2px black solid; 
J 
#pl ( 
width: 400px; 
font-family: "Arial Black", "Georgia", "Courier New", "sans-serif"; 


font-size: xx-large; 
font-style: italic; 
font-variant: small-caps; 
font-weight: bold; 

} 


#p2 { 
width: 400px; 
font-family: 'Butcherman'; 


} 


Cédigo CSS 3.20: fontes.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao13.zip 


O No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/css/public_html/fontes. html 
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No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/-^«USUARIO? /css/public. html/fontes.html. 


‘© Listas 


Podemos controlar a formatacáo das listas com as seguintes propriedades. 


list-style-type 


Podemos definir o símbolo utilizado nos itens de uma determinada lista com a propriedade list- 
style-type. A listagem completa desses símbolos pode ser consultada no endereço http: //www.w3. 
org/TR/css3-lists/#ua-stylesheet. Veja alguns possíveis valores da propriedade list-style-type. 


Listas sem ordem 


e K19 Treinamentos 
e K19 Treinamentos 
e K19 Treinamentos 


Listas com ordem 


1. K19 Treinamentos 
2. K19 Treinamentos 
3. K19 Treinamentos 


. K19 Treinamentos 
. K19 Treinamentos 
. K19 Treinamentos 


upper-alpha 


. K19 Treinamentos 
B. K19 Treinamentos 
y. K19 Treinamentos 


K19 Treinamentos 
K19 Treinamentos 


K19 Treinamentos 


circle 


. K19 Treinamentos 
. K19 Treinamentos 
. K19 Treinamentos 


upper-roman 


a. K19 Treinamentos 
. K19 Treinamentos 
. K19 Treinamentos 


lower-alpha 


. K19 Treinamentos 
. K19 Treinamentos 
. K19 Treinamentos 


= K19 Treinamentos 
= K19 Treinamentos 
= K19 Treinamentos 


square 


i. K19 Treinamentos 
ii. K19 Treinamentos 
iii. K19 Treinamentos 


lower-roman 


x. K19 Treinamentos 
a. K19 Treinamentos 
a. K19 Treinamentos 


—. K19 Treinamentos 
—. K19 Treinamentos 
=. K19 Treinamentos 


cjk-ideographic 


list-style-image 


É possível definir uma imagem para ser utilizada nos itens de uma determinada lista com a pro- 
priedade list-style-image. 


url(^url") URL da imagem. 
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none Sem imagem (padrão). 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 


* K19 Treinamentos 


* K19 Treinamentos list-style-image: url(’estrela.png’ ) 


* K19 Treinamentos 


list-style-position 


Por padrão, os bullets de uma lista não são exibidos dentro dos boxes dos itens. Podemos alterar 
esse comportamento através da propriedade list-style-position. 


inside Os bullets sáo exibidos dentro dos boxes dos itens. 
outside Os bullets não são exibidos dentro dos boxes dos itens. (padrão). 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 


list-style-position: outside 


list-style 


A propriedade list-style é um atalho para as outras propriedades de lista. 


list-style-position: inside 


list-style: list-style-type, list-style-position, list-style-image 


ay Exercícios de Fixacáo 


(15) No projeto css, crie um arquivo chamado listas.html. 


1 |SIDOCINPE mimi 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Listas</title> 

6 <link rel="stylesheet” type="text/css” href="listas.css"> 

7 </head> 

8 <body> 

9 <ul id="ul1"> 

10 «li»K01 - Lógica de Programação</li> 

11 «li»K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 

12 «li»K03 - Modelo Relacional e SQL</li> 
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13 </ul> 

14 

15 <ul id="ul2"> 

16 «li»K01 - Lógica de Programação</li> 

17 «li»K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 
18 «li»K03 - Modelo Relacional e SQL«/li» 

19 «/ul» 

20 

21 «ol» 

22 «li»K01 - Lógica de Programação</li> 

23 «li»K02 - Desenvolvimento Web com HTML, CSS e JavaScript«/li» 
24 «li»K03 - Modelo Relacional e SQL</li> 

25 </ol> 

26 </body> 

27 «/html» 


Código HTML 3.12: listas.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao15.zip 


(16) No projeto css, crie um arquivo CSS chamado listas.css. 


1 I 

2 border: 2px black solid; 

3 width: 400px; 

4 |} 

5 

6 sull { 

7 list-style-type: square; 

8 list-style-position: inside; 
9 B 

10 

11 |#ul2 ( 

12 list-style-image: url('http://k19.com.br/figs/k02-logo-small.png'); 
13 |} 

14 

15 Jol { 

16 list-style-type: upper-roman; 
17 |} 


Código CSS 3.22: listas.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao16.zip 


@ No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/css/public html/listas.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/listas.html. 


‘© Bordas 


A linguagem CSS possui diversas propriedades para definir a formatação das bordas dos elemen- 


tos HTML. 
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border-style 


Podemos definir o estilo das bordas de um elemento HTML com a propriedade border-style. Veja 
os principais valores dessa propriedade. 


dotted dashed solid double 
groove ridge inset outset 


border-width 


A grossura das bordas pode ser determinada com a propriedade border-width. 


thin Borda fina. 
medium Borda média (padrão). 
thick Borda grossa. 
medida A medida corresponde a grossura da borda. 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 
thin medium thick 10px 


border-color 


A propriedade border-color define a cor das bordas de um elemento HTML. Essa propriedade 
aceita o valor transparent(padráo) ou qualquer cor CSS. 


color Uma cor CSS. 
transparent Faz a borda ser transparente. 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 
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border 


A propriedade border é um atalho para as propriedades que definem o estilo, a grossura e a cor 
das bordas dos elementos HTML. 


= 


border: border-width border-style border-color; 


border-left-* border-top-* border-right-* border-bottom-* 


O estilo, a grossura e a cor podem ser definidos individualmente para a borda da esquerda, borda 
superior, borda da direita e borda inferior de um elemento HTML. Veja o exemplo a seguir. 


border-width: 10px; 


border-top-style: dashed; 
border-top-color: blue; 


border-right-style: solid; 
border-right-color: green; 


border-bottom-style: groove; 
border-bottom-color: orange; 


border-left-style: dotted; 
border-left-color: red; 


border-left border-top border-right border-bottom 


As propriedades border-left, border-top, border-right e border-bottom são atalhos para as pro- 
priedades que definem individualmente o estilo, a grossura e a cor das bordas da esquerda, superio- 
res, da direita e inferiores dos elementos HTML. Veja alguns exemplos: 


border-top: 10px dashed blue; 
border-right: 10px solid green; 
border-bottom: 10px groove orange; 
border-left: 10px dotted red; 


border-radius 


Bordas com cantos arredondados podem ser definidas com a propriedade border-radius. 
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medida A medida corresponde ao raio. 


x% O valor x é o raio em porcentagem. 


10px 10px 


10px 10p 


border-radius: 10px border-radius: 10px 5px 


border-radius: 10px 5px 20px border-radius: 10px 5px 20px 3px 


border-*-*-radius 


As propriedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius 
e border-bottom-left-radius são utilizadas para definir o arredondamento das bordas dos cantos 
superior esquerdo, superior direito, inferior direito e inferior esquerdo respectivamente. Veja alguns 
exemplos: 


border-top-left-radius: 10px border-top-right-radius: 10px 


border-bottom-right-radius: 10px border-bottom-left-radius: 10px 
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border-collapse 


Podemos definir bordas para cada célula de uma tabela e para a propria tabela. Por padráo, essas 
bordas sáo exibidas separadamente. Mas, é possível determinar que duas bordas "vizinhas" sejam 
exibidas como se fossem uma só com a propriedade border-collapse. 


separate Bordas separadas (padrão). 
collapse Bordas unidades. 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 


Célula 1 Célula 2 Célula 1 Célula 2 


Célula 3 Célula 4 Célula 3 Célula 4 


border-collapse: separate border-collapse: collapse 


border-spacing 


A propriedade border-spacing permite definir o espaçamento entre as células de uma tabela. 
Essa propriedade afeta o espaçamento entre as bordas somente se o valor da propriedade border- 
collapse for separate. 


medidal medida? A medidal corresponde ao espaçamento horizontal e a medida? corresponde 
ao espaçamento vertical. 

medida A medida corresponde ao espaçamento horizontal e vertical. 

inherit Assume o valor da mesma propriedade no elemento HTML pai. 


Célula 1 Célula 2 Célula 1 Célula 2 


Célula 3 Célula 4 Célula 3 Célula 4 


border-spacing: 5px border-spacing: 10px 5px 


Outras propriedades 


A linguagem CSS define mais algumas propriedades de formatação de bordas. 


border-image 

* border-image-outset 
* border-image-repeat 
* border-image-slice 

* border-image-source 


* border-image-width 


MIS wwwtacebook.com/ki9treinamentos 183 


CSS 


184 


ey Exercícios de Fixacáo 


O No projeto css, crie um arquivo chamado bordas.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Bordas</title> 
6 <link rel="stylesheet” type="text/css” href="bordas.css"> 
7 </head> 

8 <body> 

9 <div id="divl"></div> 
10 <div id="div2"></div> 
11 <div id="div3"></div> 
12 <div id="div4"></div> 
13 <div id="div5"></div> 
14 

15 «table id="tabela1"> 
16 <tr> 

17 <td>K01</td> 

18 <td>K02</td> 

19 <td>K03</td> 

20 </a> 

21 </table> 

22 

23 <table id="tabela2"> 
24 <tr> 

25 <td>K01</td> 

26 <td>K02</td> 

27 <td>K03</td> 

28 Sat 

29 «/table» 

30 «/body» 

31 |</html> 


Código HTML 3.13: bordas.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao18.zip 


(19) No projeto css, crie um arquivo CSS chamado bordas.css. 


1 div { 

2 width: 200px; 

3 height: 100px; 

4 margin: 10px; 

5 

6 

7 sdivl ( 

8 border-style: solid; 
9 border-width: thin; 
10 border-color: red; 

11 border-radius: 10px; 
12 ||} 

13 

14 |#div2 ( 

15 border-style: dotted; 
16 border-color: yellow; 
17 border-radius: 10px 30px; 
18 |) 

19 

20 |#div3 ( 
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21 border-style: dashed; 

22 border-width: 4px; 

23 border-color: blue; 

24 border-radius: 10px 20px 30px 40px; 
25 |} 

26 

27 |#div4 { 

28 border-style: double; 

29 border-width: 8px; 

30 border-color: green; 

31 border-top-left-radius: 10px; 


32 border-top-right-radius: 20px; 
33 border-bottom-right-radius: 30px; 
34 border-bottom-left-radius: 40px; 


35 |} 

36 

37 stdiv5 ( 

38 border-left-style: solid; 
39 border-left-width: thin; 
40 border-left-color: red; 
41 

42 border -top-style: dotted; 
43 border -top-color: yellow; 
44 


45 border -right-style: dashed; 
46 border -right-width: 4px; 
47 border -right-color: blue; 
48 
49 border -bottom-style: double; 
50 border -bottom-width: 8px; 


51 border -bottom-color: green; 
52 |} 

53 

54 table, td { 

55 font-size: xx-large; 


56 border: 1px solid black; 
57 margin: 10px; 

58 |} 
59 
60 |#tabelal { 

61 border-collapse: collapse; 
62 |} 
63 
64 |#tabela2 ( 

65 border-spacing: 20px; 
66 |} 


Cédigo CSS 3.24: bordas.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacaol9.zip 


(20) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/bordas. html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/bordas. html. 


"9 Outline 
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O box de um elemento HTML pode ser contornado por uma linha denominada outline. Essa 
linha nao afeta as dimensóes dos boxes. A linguagem CSS possui diversas propriedades para definir 
a formatação do outline dos elementos HTML. 


outline-style 


Podemos definir o estilo do outline de um elemento HTML com a propriedade outline-style. Veja 
0s principais valores dessa propriedade. 


dotted dashed solid double 
groove ridge inset outset 


outline-color 


A propriedade outline-color define a cor do outline de um elemento HTML. 


color Uma cor CSS. 
invert A cor inversa à cor do background (padrão). 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 


outline-width 


A grossura dos outlines pode ser determinada com a propriedade outline-width. 


thin Outline fino. 

medium Outline médio (padrão). 

thick Outline grosso. 

medida A medida corresponde à grossura do outline. 

inherit Assume o valor da mesma propriedade no elemento HTML pai. 
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S 


thin medium thick 10px 


outline-offset 


CS 


Podemos definir a distância do outline de um elemento HTML em relação às bordas do mesmo 


com a propriedade outline-offset. 


medida A medida corresponde ao tamanho do outline-offset (0px é o valor padrão). Esse 
valor pode ser negativo. 

inherit Assume o valor da mesma propriedade no elemento HTML pai. 
Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Aliquam accumsan peticotrttpm sit amet elit. Aliquam accumsan vehicula diam sit amet 
bibendum. Aliquam so} ER | ellus. Duis bibendum. Aliquam sed imo tellus. Duis 
placerat suscipit turpis inlsollicitudin] Nunc lacus placerat suscipit turpis in sollicitudin. Nunc lacus 
magna, auctor vitae venenatis eu, dictum ac augue. magna, auctor vitae venenatis eu, dictum ac augue. 

outline-offset: 10px outline-offset: -5px 


outline 


A propriedade outline é um atalho para as propriedades outline-color, outline-style e outline- 


width. Veja a sintaxe dessa propriedade. 


1 outline: outline-color outline-style outline-width; 


(> Exercícios de Fixacáo 


o No projeto css, crie um arquivo chamado outlines.html. 


1 SUNDOCTYPE hümb- 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Outlines</title> 

6 <link rel="stylesheet” type="text/css” href="outlines.css"> 
7 </head> 

8 <body> 

9 «div id=”div1”></div> 

10 <div id="div2"></div> 

11 <div id="div3"></div> 

12 </body> 

13 |</html> 


Código HTML 3.14: outlines.html 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao21.zip 


e No projeto css, crie um arquivo CSS chamado outlines.css. 


1 div ( 

2 width: 200px; 

3 height: 100px; 

4 border: 4px solid black; 
5 margin: 50px; 

6 |} 

7 

8 j#divl ( 

9 outline-style: solid; 
10 outline-color: red; 

11 outline-width: 4px; 

12 |) 

13 

14 |#div2 ( 

15 outline-style: dashed; 
16 outline-color: blue; 
17 outline-width: 2px; 

18 outline-offset: -20px; 
19 |} 

20 

21 |#div3 { 

22 outline-style: solid; 
23 outline-color: green; 
24 outline-width: 4px; 

25 outline-offset: 20px; 
26 |} 


Cédigo CSS 3.26: outlines.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao22.zip 


(23) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/outlines.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/outlines.html. 


"9 Sombras 


A propriedade box-shadow permite adicionar sombras externas e internas nos boxes dos ele- 
mentos HTML. O valor dessa propriedade pode ser definido de diversas maneiras. Confira, nas ima- 
gens abaixo, algumas formas de utilização da propriedade box-shadow para definir sombras exter- 
nas. 
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Deslocamento horizontal 


ta { 
box-shadow: |llO0px 10px #7£7£7£; 
} 
Deslocamento vertical 
Deslocamento horizontal 
Esmaecimento 
#b { 
box-shadow: 10px 10px 10px #7£7£7£; 
} 
Deslocamento vertical 
Deslocamento horizontal 
Esmaecimento Propagação 
tc { — as 
box-shadow: 10px 10px|0/ 10px #7£7£7£; 
} 


Deslocamento vertical 


Os valores dos deslocamentos vertical e horizontal podem ser negativos fazendo com que a som- 
bra externa seja projetada para cima e para a esquerda. 


As regras para definir uma da sombra interna são praticamente as mesmas da sombra externa. A 
única diferença é que devemos começar a atribuição do valor com a palavra inset. 


Deslocamento horizontal 


Deslocamento vertical 


#a { 


box-shadow: inset 10px 10px| #000000; 


IS www.facebook.com/k19treinamentos 189 


CSS 


190 


Deslocamento horizontal 


Deslocamento vertical 


#b { 


box-shadow: inset 10px|10px 10px | #000000; 


} 
Esmaecimento 
Deslocamento horizontal 
Deslocamento vertical 
tic { E 
box-shadow: inset #000000; 
j : 


Esmaecimento 


Propagação 
ey Exercícios de Fixacáo 


(24) No projeto css, crie um arquivo chamado sombras.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Sombras</title> 

6 <link rel="stylesheet” type="text/css” href="sombras.css"> 
7 </head> 

8 <body> 

9 <div id="divl"></div> 

10 <div id="div2"></div> 

11 <div id="div3"></div> 

12 <div id="div4"></div> 

13 </body> 

14 |</html> 


Código HTML 3.15: sombras.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao24.zip 


(25) No projeto css, crie um arquivo CSS chamado sombras.css. 


1 diy c 

2 width: 200px; 

3 height: 100px; 

4 border: 4px solid black; 
5 margin: 50px; 

6 |} 

7 

8 |gdivl { 
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9 box-shadow: 10px 5px gray; 

10 |) 

11 

12 |#div2 ( 

13 box-shadow: 10px 5px 5px gray; 

DEP 

15 

16 j#div3 ( 

17 box-shadow: inset 10px 10px gray; 

18 |} 

19 

20 |#div4 ( 

21 box-shadow: inset 10px 10px 5px gray; 
22 |} 


Cédigo CSS 3.27: sombras.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao25.zip 


(26) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/sombras.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/css/public. html/sombras.html 


‘© Margens 


A linguagem CSS possui diversas propriedades para definir a formatação das margens internas e 
externas dos elementos HTML. 
margin-* 


Os tamanhos das margens externas do box de elemento HTML podem ser definidos individual- 
mente com as propriedades margin-left, margin-top, margin-right e margin-bottom. 


auto O tamanho da margem é calculado automaticamente pelos navegadores. 
medida A medida corresponde ao tamanho da margem (0px é o padrão). 
x% O valor x corresponde ao tamanho da margem. Esse valor é uma porcenta- 


gem da largura do elemento HTML pai. 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 
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margin-top: 5px 
margin-right: 10px 
margin-bottom: 15px 


margin-left: 20px 


margin 


A propriedade margin é um atalho para as propriedades margin-left, margin-top, margin-right 
e margin-bottom. Podemos utilizar a propriedade margin de 4 formas diferentes: 


UU 


7 


margin: 5px 10px 15px 20px margin: 5px 10px 15px 


fll Ubi 


y 


LY 


margin: 5px 10px margin: 5px 


padding-* 


Os tamanhos das margens internas do box de elemento HTML podem ser definidos individual- 
mente com as propriedades padding-left, padding-top, padding-right e padding-bottom. 


Valor Descricáo 
medida A medida corresponde ao tamanho da margem (0px é o padrão). 
x96 O valor x corresponde ao tamanho da margem. Esse valor é uma porcenta- 


gem da largura do elemento HTML pai. 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 
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adipiscing elit. Duis volutpat laoreet magna,, 
nec placerat nisl egestas id. Maecenas a: 
nulla vel arcu viverra lobortis. In ligula nunc, 
cursus non faucibus sed, hendrerit id est. 


/faucibus, fringilla id tellus. Etiam nec, 
pulvinar tellus. Mauris et diam at est cursus: 
/ egestas. Donec tincidunt metus non ante’ 


(a fpsurh dolor A amet, Vy 


Maecenas felis neque, porta et sagittis. 


AOPE, 


EA 


padding 


padding-top: 5px 
padding-right: 10px 
padding-bottom: 15px 
padding-left: 20px 


A propriedade padding é um atalho para as propriedades padding-left, padding-top, padding- 
right e padding-bottom. Podemos utilizar a propriedade padding de 4 formas diferentes: 


7 


(SEX 
/ 7/7 A réni ip isir À dolor sit sit amet, Consectetur, 77 
iy / adipiscing elit. Duis volutpat laoreet magna, 7 

nec placerat nisl egestas id. Maecenas a/ 

20p: nulla vel arcu viverra lobortis. In ligula nunc,” 1 Ope 
cursus non faucibus sed, hendrerit id est. 
Maecenas felis neque, porta et sagittis 
faucibus, fringilla id tellus. Etiam nec 
pulvinar tellus. Mauris et diam at est cursus, 
egestas. Donec tincidunt metus non ante. 
tristique egestas. 


P 2 


tify 


padding: 5px 10px 15px 20px 


2 A 


Lorem ipsum dolor sit amet, consectetur 


adipiscing elit. Duis volutpat laoreet magna, 
10px nulla vel arcu viverra lobortis. In ligula nunc,” 1 0pàc 
cursus non faucibus sed, hendrerit id est. 
ETIP 
faucibus, fringilla id tellus. Etiam nec 7, 
// pulvinar tellus. Mauris et diam at est cursus, 
77 ti egestas, r 
ty A, 


nec placerat nisl egestas id. Maecenas a 
Maecenas felis neque, porta et sagittis’, 

$93 4 q pi g 
egestas. Donec tincidunt metus non ante 77 
padding: 5px 10px 


77 


/ 


A, ipsum Me amet, WY 
Apm 


77 Maecenas felis neque, porta et sagittis H 


UY y 
7 YY Y 


7 


adipiscing elit. Duis volutpat laoreet magna, Wy 
nec placerat nisl egestas id. Maecenas a 

nulla vel arcu viverra lobortis. In ligula nunc, 1Opx 
cursus non faucibus sed, hendrerit id est. 2,7, 


faucibus, fringilla id tellus. Etiam nec 
pulvinar tellus. Mauris et diam at est cursus 
egestas. Donec tincidunt metus non ante 
tristique egestas. 


padding: 5px 10px 15px 


p 7 77 7 
MM 1 oe f 
/ Lorem ipsum dolor sit amet, consectetur 7 
FA 
J, 


(Spx null vel arcu viverra lobortis. In ligula nunc, 


: A Ses 7, 


adipiscing elit. Duis volutpat laoreet magna, 
nec placerat nisl egestas id. Maecenas a 


cursus non faucibus sed, hendrerit id est. 
Maecenas felis neque, porta et sagittis 
faucibus, fringilla id tellus. Etiam nec 
pulvinar tellus. Mauris et diam at est cursus 
egestas. Donec tincidunt metus non ante 
tristique egestas. 


INEN 


padding: 5px 


Mais Sobre 
Considere o seguinte exemplo. 


‘i 


1|«div id="div1"> 

2| <div id="div2">...</div> 
3 |«div» 

1 |#div2 ( 
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2 width: 50%; 


Podemos utilizar as propriedades de margem para alinhar de forma centralizada na horizontal o 


div2. 

1 [#div2 { 

2( margin-left: auto; 
3 [| margin-right: auto; 
4 width: 50%; 

5 |} 


2» Exercícios de Fixacáo 


o No projeto css, crie um arquivo chamado margens.html. 


ONAN WN -— 


wo 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - Margens</title> 
<link rel="stylesheet” type="text/css" href="margens.css"> 
</head> 
<body> 
<div> 
<p id="p1">K19</p> 
<a id="al" href="#">k19</a> 
<a id="a2" href="#">k19</a> 
<p id="p2">K19</p> 
</div> 
</body> 
</html> 


Código HTML 3.17: margens.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao27.zip 


(28) No projeto css, crie um arquivo CSS chamado margens.css. 


1) [elie E 

2 width: 600px; 

3 border: 1px solid black; 

4 |} 

5 

6 |p, at 

7 border: 1px solid black; 
8j 

9 

10 |#p1 { 

11 Margin: 5px 10px 20px 30px; 
12 padding: 5px 0px 0px 20px; 
13 |} 

14 

15 j#al { 

16 Margin-left: 10px; 
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17 padding: 5px; 
18 |} 


20 |#a2 { 

21 margin-left: 20px; 
22 padding: 10px; 

23 |} 


25 |#p2 { 

26 margin: 20px; 
27 padding: 10px; 
28 |} 


Cédigo CSS 3.30: margens.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao28.zip 


(29) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/margens.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/margens.html. 


‘© Altura e Largura 


A linguagem CSS possui algumas propriedades para controlar a largura e a altura dos elementos 
HTML. 
height e width 


A altura e a largura dos boxes dos elementos HTML podem ser definidas com as propriedades 
height e width respectivamente. 


auto A altura ou largura são calculadas automaticamente pelos navegadores. 

medida A medida corresponde à largura ou a altura. 

x96 A medida corresponde à largura ou a altura como porcentagem das dimensóes do 
elemento HTML pai 

inherit Assume o valor da mesma propriedade no elemento HTML pai. 


min-height e max-height 


A propriedade height é utilizada para determinar a altura exata do box de um elemento HTML. 
Uma outra abordagem é definir um limite inferior e/ou um limite superior para essa dimensão. Esses 
limites podem ser definidos com as propriedades min-height e max-height. 


none Sem valor (padráo para max-height). 
medida A medida corresponde à altura máxima ou mínima desejada (0px é padráo para 
min-height). 
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x% 


inherit 


O valor x corresponde à altura máxima ou mínima. Esse valor é uma porcentagem 
da altura do elemento HTML pai 
Assume o valor da mesma propriedade no elemento HTML pai. 


min-width e max-width 


A propriedade width é utilizada para determinar a largura exata do box de um elemento HTML. 
Uma outra abordagem é definir um limite inferior e/ou um limite superior para essa dimensão. Esses 
limites podem ser definidos com as propriedades min-width e max-width. 


none 
medida 


x% 


inherit 


Sem valor (padrao para max-width). 

A medida corresponde a largura máxima ou minima desejada (0px é padráo para 
min-width). 

O valor x corresponde à largura máxima ou mínima. Esse valor é uma porcentagem 
da largura do elemento HTML pai 

Assume o valor da mesma propriedade no elemento HTML pai. 


ox Exercícios de Fixacáo 


o No projeto css, crie um arquivo chamado altura-largura.html. 


c ——— 
«oO Oo 40071 3 UN — COW AN DO 3 UN 


<!DOCTYPE html» 


«head» 


</head> 
<body> 
<p id="p1º> 


leo nunc, 
</p> 
<p id="p2"> 


<html lang="pt-br"> 


«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - Altura e Largura</title> 
<link rel="stylesheet” type="text/css” href="altura-largura.css"> 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusce malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusce malesuada 


in ornare turpis aliquam quis. 


20 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
21 leo nunc, in ornare turpis aliquam quis. 
22 </p> 
23 «p id="p3"> 
24 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
25 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
26 sit amet sodales quam massa sit amet risus. Fusce malesuada 
27 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
28 leo nunc, in ornare turpis aliquam quis. 
29 </p> 
30 </body> 
31 |«/html» 
Código HTML 3.18: altura-largura.html 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao30.zip 


o No projeto css, crie um arquivo CSS chamado altura-largura.css. 


Pt 


RA LA E ee 
AUN —oOt00-1007|1 FWHNY = 


border: 


max-width: 600px; 
max-height: 250px; 
min-height: 100px; 


1 
width: 


{ 
width: 


1px solid black; 


200px; 


400px; 


Código CSS 3.31: altura-largura.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao31.zip 


(32) No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/css/public html/altura-largura.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/css/public. html/altura-largura.html. 


"9 Display e Visibilidade 


Alinguagem CSS possui algumas propriedades para controlar a forma de exibicáo e a visibilidade 
dos elementos HTML. 


display 


A propriedade display define a forma de exibição dos elementos HTML. Os 5 principais valores 
dessa propriedade são: inline(padrão), block, inline-block, list-item e none. 


inline 


block 


Considere o box de um elemento HTML com display: inline. Esse box nào gera 
quebras de linha e as suas dimensóes sáo calculadas com base no conteüdo do ele- 
mento HTML. As propriedades width e height nào modificam a largura e a altura 
do box. As margens e as bordas do box de um elemento HTML com display: inline 
“empurram” os boxes vizinhos horizontalmente. Verticalmente, os boxes vizinhos 
não são “empurrados”. 

Considere o box de um elemento HTML com display: block. Esse box gera quebras 
de linha e, por padrão, ocupa todo o espaço horizontal do elemento pai. Podemos 
controlar a largura e a altura desse box com as propriedades width e height. 
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inline-block O comportamento dos boxes dos elementos HTML com display: inline-block é 


similar ao dos boxes dos elementos HTML com display: inline. Basicamente, a 
diferenca entre eles é que podemos modificar a largura e altura dos boxes dos ele- 
mentos HTML com display: inline-block. 


list-item O comportamento dos boxes dos elementos HTML com display: list-item é similar 


ao dos boxes dos elementos HTML com display: block. Basicamente, a diferenca 
entre eles é que um bullet é exibido no canto esquerdo de box de um elemento 
HTML com display: list-item. 


none Os boxes dos elementos HTML com display: none nào sáo exibidos e náo ocupam 


espaco na página. 


Lorem ipsum dolor sit amet, consectetur adipiscing-el iquam accumsan vehicula diam sit 


amet bibendum. Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. 


Nunc lacus magna, auctor vitae venenatis eu, dicturh-ae-augue—Nunc eleifend dignissim felis. 


display: inline 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed tempor tellus. Duis 


suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. 
Nunc eleifend dignissim felis. 


display: block 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit 


amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin. 


Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis. 


display: inline-block 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed tempor tellus. Duis 


I ——— 


suscipit turpis in sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. 
Nunc eleifend dignissim felis. 


display: list-item 
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Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin. Nunc lacus 


magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis. 


display: none 


visibility 
Podemos determinar se um elemento HTML deve ser exibido ou nào através da propriedade 


visibility. O valor visible(padrão) indica que o elemento deve ser exibido e o valor hidden indica que 
o elemento não deve ser exibido. 


visible Visível (padrão). 
hidden Invisível. 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet, consectetur adipiscing-elit-Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed tempor tellus. Duis placerat suscipit turpis in sollicitudin. 


Nunc lacus magna, auctor vitae venenatis eu, dicturh-ae-augue—Nunc eleifend dignissim felis. 


visibility: visible 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin. 


Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis. 


visibility: hidden 


Importante 
A Na renderização, os elementos HTML com display: none são totalmente desconside- 
rados. Em outras palavras, é como se eles simplesmente não existissem. Dessa forma, 
eles não afetam o posicionamento dos demais elementos. Por outro lado, os elementos HTML 
com visibility: hidden apesar de não serem exibidos fazem parte da página renderizada e po- 
dem afetar o posicionamento dos demais elementos pois o espaço ocupado por eles pode não 
ser nulo. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin. Nunc lacus 


magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis. 


display: none 


m K | S www.facebook.com/k19treinamentos 199 


CSS 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed tempor tellus. Duis suscipit turpis in sollicitudin. 


Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend dignissim felis. 


visibility: hidden 


(> Exercícios de Fixacáo 


o No projeto css, crie um arquivo chamado display-visibilidade.html. 


Y xL Lll wd dem uds ux 


à 


à 
OANA 0701 C0 l2—. COHO AN DAO AUN 


Cl CO CO CO CO CO CO) CO GJ) NINO h2O h2 h2O h2 h2O DY DPD MN 
OANA NT 3 UN =S= COW AND Ui 30020 C 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - Display e Visibilidade</title> 
<link rel="stylesheet” type="text/css” href="display-visibilidade.css"> 
</head> 
<body> 
<p> 
Lorem ipsum dolor sit amet, <span id="span1">inline</span> 
adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 
</p> 


<p> 
Lorem ipsum dolor sit amet, <span id="span2">block</span> 
adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 
</p> 


<p> 
Lorem ipsum dolor sit amet, <span id="span3">inline-block</span> 
adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 
</p> 


<p> 
Lorem ipsum dolor sit amet, <span id="span4">list-item</span> 
adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 
</p> 


<p> 
Lorem ipsum dolor sit amet, <span id="span5”>none</span> 
adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 
</p> 


<p> 
Lorem ipsum dolor sit amet, <span id="span6">hidden</span> 
adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 
</p> 
</body> 
</html> 


Código HTML 3.19: display-visibilidade.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao33.zip 


o No projeto css, crie um arquivo CSS chamado display-visibilidade.css. 


1 
2 


pt 
border: 2px solid black; 


200 
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width: 600px; 
B 


span ( 

padding: 15px; 

margin: 40px; 
9 width: 200px; 
10 height: 100px; 
11 border: 2px solid black; 
12 background-color: yellow; 
13 |j 


15 |#spanl { 
16 display: inline; 
17 |} 


19 |#span2 
20 display: block; 
21 |} 


e^ 


23 |#span3 ( 
24 display: inline-block; 
25 Àj 


27 |#span4 ( 
28 display: list-item; 
29 |} 


31 |#span5 { 
32 display: none; 
33 Bj 


35 |#span6 ( 
36 visibility: hidden; 
37 |} 


Código CSS 3.32: display-visibilidade.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao34.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/css/public html/display-visibilidade.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //1localhost/-«USUARIO? /css/public. html/display-visibilidade.html. 


‘© Opacidade 


Podemos definir a opacidade dos elementos HTML com a propriedade opacity. 


x O valor x é um nümero entre O(totalmente transparente) e 1(sem transparéncia, 
padrão). 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 
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opacity: 1 opacity: 0.75 opacity: 0.5 opacity: 0.25 


Ru Exercícios de Fixacáo 


o No projeto css, crie um arquivo chamado opacidade.html. 


<!DOCTYPE html» 
<html langz"pt-br"» 
«head» 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - Opacidade</title> 
<link rel="stylesheet” type="text/css” hrefz"opacidade.css"» 
</head> 
<body> 
<div id="div1"></div> 
<div id="div2"></div> 
<div id="div3"></div> 
<div id="div4"></div> 
<div id="div5"></div> 
</body> 
</html> 


vu. md ee ey 
EeEwUNAO WO ODN FWHNH = 


Cédigo HTML 3.20: opacidade.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao36.zip 


9 No projeto css, crie um arquivo CSS chamado opacidade.css. 


1 [diy 

2 width: 100px; 
3 height: 100px; 
4 background-color: red; 
5 

6 

7 &divi ( 

8 opacity: 0; 

9 |} 

10 

11 |#div2 ( 

12 opacity: Ws As 
18 ||} 

14 

15 j#div3 ( 

16 opacity 079; 
di |} 

18 

19 |#div4 ( 

20 opacity 8017/5: 
21 |} 

22 

23 |#div5 { 

24 opacity: 1; 

25 |} 
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Código CSS 3.33: opacidade.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css- fixacao37.zip 


o No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/css/public html/opacidade.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //1localhost/-«USUARIO? /css/public. html/opacidade.html. 


‘© Posicionamento 


A linguagem CSS define quatro formas para posicionar os boxes dos elementos HTML: static, 
relative, fixed e absolute. Mostraremos o funcionamento de cada uma dessas formas. A propriedade 
position determina a forma de posicionamento desejada. 


static 


O valor static é o valor padrao da propriedade position. O box de um elemento com position: 
static é colocado na sua posição natural. Não podemos alterar a posição dos boxes dos elementos 
HTML com position: static. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam 
accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus. 
Duis placerat suscipit turpis in sollicitudin. 


Duis nunc est, consequat vel pulvinar in, egestas sit amet odio. Praesent 
at leo feugiat, fermentum diam ut, commodo lacus. Interdum et malesua 
fames ac ante ipsum primis in faucibus. 


position: static 


relative 


O box de um elemento com position: relative é colocado em uma posição relativa a sua posição 
natural. As propriedades left, top, right e bottom são utilizadas para determinar o deslocamento 
entre a posição desejada e a posição natural. O espaço que seria ocupado por esse box se ele estivesse 
em sua posição natural não é ocupado por nenhum outro elemento. 


29) K | S www.facebook.com/k1 9treinamentos 203 


CSS 


204 


fixed 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam 
accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus. 
Duis placerat suscipit turpis in sollicitudin. 


mu 


Duis 
at leo 


DN 


fames ac ante ipsum primis in faucibus. 


t vel pulvinar in, egestas sit amet odio. Praesent 
m diam ut, commodo lacus. Interdum et malesua 


position: relative 


O box de um elemento com position: fixed é colocado em uma posição relativa à página e não 
acompanha a rolagem do conteúdo. As propriedades left, top, right e bottom são utilizadas para 
determinar o deslocamento entre a posicáo desejada e à pagina. 


Lorem ipsum dolor sit à 
accumsan vehicula dian 
tellus. Duis placerat sus 
Duis nunc est, consequ: 
Praesent at leo feugiat 
Interdum et malesua fani 


adipiscing elit. Aliquam 
m. Aliquam sed tempor 
citudin. 

, egestas sit amet odio. 
im ut, commodo lacus. 
primis in faucibus. 


Fusce vehicula turpis 
dapibus. Etiam posuere| 
erat nec dolor imperdiet 
dui ac, gravida augue. 
ligula. Fusce id vari 
pellentesque risus. Ma 


e, sed vestibulum arcu 
olestie. Aenean rutrum 
turpis suscipit, tristique 
sto. Aliquam ut congue 
uis fringilla ante, id 

at purus a facilisis. 


Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu 
dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum 
erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique 
dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue 
ligula. Fusce id varius magna. In quis fringilla ante, id 
pellentesque risus. Maecenas elementum at purus a facilisis. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Aliquam sed tempor tellus. Duis placerat suscipit turpis in 
sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum 
ac augue. Nunc eleifend dignissim felis at mattis. Duis nunc est, 
consequat vel pulvinar in, egestas sit amet odio. Praesent at leo 
feugiat, fermentum diam ut, commodo lacus. Interdum et 
malesuada fames ac ante ipsum primis in faucibus. 


position: fixed 


absolute 


O box de um elemento com position: absolute é colocado em uma posição relativa à posição do 
box do elemento HTML ancestral mais próximo com position diferente de static. Se nào existir um 
ancestral nessas condições a posição será relativa à página. As propriedades left, top, right e bottom 
sáo utilizadas para determinar o deslocamento entre a posicáo desejada e o ponto de referéncia. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam 
accumsan vehicula diam sit amet bibendum. Aliquam sed tempor tellus. 


Duis placerat suscipit turpis in 


Duis nunc est, consequat 
at leo feugiat, fermentum 


fames ac ante ipsum primis in faucibus. 


et odio. Praesent 
erdum et malesua 


position: absolute 


Figura 3.7: Elemento com position diferente de static utilizado como referéncia 
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Lorem ipsum dolor sit a 
accumsan vehicula diar 
tellus. Duis placerat sus 
Duis nunc est, consequ 
Praesent at leo feugiat} 
Interdum et malesua fan 


adipiscing elit. Aliquam 
m. Aliquam sed tempor 
citudin. 

, egestas sit amet odio. 
m ut, commodo lacus. 
primis in faucibus. 


Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu 
dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum 
erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique 
dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue 
ligula. Fusce id varius magna. In quis fringilla ante, id 
pellentesque risus. Maecenas elementum at purus a facilisis. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 


Duis nunc est, consequ , egestas sit amet odio. 
Praesent at leo feugiat} im ut, commodo lacus. 
Interdum et malesua fa: primis in faucibus. 


Fusce vehicula turpis vitae mauris ornare, sed vestibulum arcu 
dapibus. Etiam posuere luctus arcu ut molestie. Aenean rutrum 
erat nec dolor imperdiet volutpat. Fusce id turpis suscipit, tristique 
dui ac, gravida augue. Nam ac placerat justo. Aliquam ut congue 
ligula. Fusce id varius magna. In quis fringilla ante, id 
pellentesque risus. Maecenas elementum at purus a facilisis. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Aliquam sed tempor tellus. Duis placerat suscipit turpis in 
sollicitudin. Nunc lacus magna, auctor vitae venenatis eu, dictum 
ac augue. Nunc eleifend dignissim felis at mattis. 


position: absolute 


Figura 3.8: Página utilizada como referéncia 


float 


Podemos fazer o box de um elemento HTML flutuar ao redor dos demais elementos através da 
propriedade float. 


left Flutuar à esquerda. 

right Flitar à direita. 

none Sem flutuação (padrão). 

inherit Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
Aliquam accumsan vehicula 


Lorem ipsum dolor sit amet, 

consectetur adipiscing elit. 

Aliquam accumsan vehicula 

diam sit amet bibendum. 

Aliquam sed tempor tellus. Duis placerat 
suscipit turpis in sollicitudin. 


diam sit amet bibendum. 
Aliquam sed tempor tellus. Duis placerat 
suscipit turpis in sollicitudin. 


float: left float: right 


Importante 
Os elementos HTML com float diferente de none podem ser reposicionados se a janela 
for redimensionada. 


Importante 
Os elementos HTML com float diferente de none não afetam a altura ou a largura do 
elemento HTML onde eles estáo contidos. 


clear 


Os box dos elementos HTML próximos do box de um elemento HTML om float diferente de none 
sáo "empurrados" horizontalmente à esquerda ou à direita. Podemos determinar que, ao invés de se- 
rem "empurrados" horizontalmente, eles sejam exibidos em uma nova linha através da propriedade 
clear. 
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left Nào permite boxes flutuando à esquerda dele. 

right Não permite boxes flutuando à direita dele. 

both Não permite boxes flutuando nem à esquerda nem à direita dele. 
none Permite boxes flutuando à esquerda e à direita (padrão) dele. 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 


clear: none 


Aliquam sed tempor tellus. Duis placerat 
suscipit turpis in sollicitudin. Nunc lacus 
magna, auctor vitae venenatis eu, dictum 
ac augue. 


clear: none 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 


clear: none 


Aliquam sed tempor tellus. Duis placerat 
suscipit turpis in sollicitudin. Nunc lacus 
magna, auctor vitae venenatis eu, dictum 
ac augue. 


clear: none 


Lorem ipsum 
dolor sit amet. 


clear: none 


Aliquam sed tempor tellus. Duis placerat 
suscipit turpis in sollicitudin. Nunc lacus 
magna, auctor vitae venenatis eu, dictum 
ac augue. 


clear: none 


z-index 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 


clear: left 


Aliquam sed tempor tellus. Duis placerat 
suscipit turpis in sollicitudin. Nunc lacus 


clear: left 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 


clear: right 


Aliquam sed tempor tellus. Duis placerat 
suscipit turpis in sollicitudin. Nunc lacus 


clear: rigth 


Lorem ipsum 
dolor sit amet. 


clear: both 


Aliquam sed tempor tellus. Duis placerat 
suscipit turpis in sollicitudin. Nunc lacus 


clear: both 


A sobreposicáo dos boxes dos elementos HTML pode ser controlada através da propriedade z- 
index. Basicamente, essa propriedade permite determinar em qual plano um box deve ser exibido. 


auto Mesmo plano do box do elemento HTML pai (padrão). 
x O valor x é o plano desejado. Esse valor pode ser negativo. 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 
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Lorem ipsum dolor sit amet, cons ng elit. Aliquam accumsan vehicula diam 
sit amet bibendum. Aliquam sed té is nlacerat suscipit turpis in sollicitudin. 
Nunc lacus magna, auctor vitae z-index: 2 |ac augue. Nunc eleifend dignissim 
felis at mattis. Duis nunc est, consequa egestas sit amet odio. Praesent at leo 
feugiat, fermentum diam ut, commodo 

Alinhamento vertical 


Utilizando as propriedades de margem e posicionamento podemos alinhar um elemento de 


forma centralizada na vertical. 


Qualquer valor 
diferente de static 


#container ( 
height: 600px; . 
position: relative; top: 50$ 


) 

#conteudo { 
height: 200px; 
position: absolute; 
top: 50%; ; 
margin-top: -100px; #container 


C Exercícios de Fixacáo 


O No projeto css, crie um arquivo chamado posicionamento.html. 


| margin-top: -100px 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - Posicionamento</title> 
<link rel="stylesheet” type="text/css” href="posicionamento.css"> 
</head> 
<body> 
«img srcz"http://www.k19.com.br/app/webroot/figs/main-header-logo.png"» 
<p id="p1"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam 
accumsan vehicula diam sit amet bibendum. 
</p> 
<p id="p2"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam 
accumsan vehicula diam sit amet bibendum. 


Se | € 
Oo Oo 40071 3 00 l2 — CWO AND OF 00 N20 — 


</p> 
«p id="p3"> 
20 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam 
21 accumsan vehicula diam sit amet bibendum. 
22 </p> 
23 
24 <p id="p4"> 
25 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam 
26 accumsan vehicula diam sit amet bibendum. 
27 </p> 
28 <p id="p5"> 
29 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam 
30 accumsan vehicula diam sit amet bibendum. 
31 </p> 
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32 
33 
34 
35 
36 
37 
38 
39 
40 
41 

42 
43 
44 
45 
46 
47 
48 
49 
50 
5] 

52 
53 
54 
55 
56 


O No projeto css, crie um arquivo CSS chamado posicionamento.css. 


3 mm d xo E xs tá, 


à 


à 
«(oO Oo 41001 300 N2— CO to00 40 01 3» C00 N20 — 


N N 
=- O 
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«p id="p6"> 
Lorem ipsum dolor 
accumsan vehicula 
</p> 
<p id="p7"> 
Lorem ipsum dolor 
accumsan vehicula 
</p> 
<p id="p8"> 
Lorem ipsum dolor 
accumsan vehicula 
</p> 


«div id="div1"> 


sit amet, consectetur adipiscing e 
diam sit amet bibendum. 


sit amet, consectetur adipiscing e 
diam sit amet bibendum. 


sit amet, consectetur adipiscing e 
diam sit amet bibendum. 


Posicionamento fixo 


</div> 


«div id="div2"> 


Posicionamento relativo 


«div id="div3"> 


Posicionamento absoluto 


</div> 
</div> 
</body> 
</html> 


iquam 


iquam 


iquam 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao39.zip 


Código HTML 3.21: posicionamento.html 


img { 
float: left; 


» 


#p3 { 
clear: left; 


} 


div { 
width: 
height: 
color: 


200px; 
100px; 
white; 


} 


#div1 { 
position: fixed; 
right: 20px; 
top: 40px; 
background-color: 


} 


#div2 { 
position: 
Opis px 
left: 60px; 
background-color: 


relative; 


} 


#div3 { 
position: absolute; 
bottom: -40px; 
right: =100px; 
background-color: 
rasto em S18 


red; 


green; 


blue; 
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Código CSS 3.34: posicionamento.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao39.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/css/public. html/posicionamento.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/css/public html/posicionamento.html. 


O Overflowe clip 


Eventualmente, o conteúdo de um elemento HTML extrapola os limites do mesmo. A linguagem 
CSS define algumas propriedades para determinar como essa situação deve ser tratada. 


overflow-x 


A propriedade overflow-x determina o que os navegadores devem fazer quando o conteúdo de 
um elemento HTML extrapola horizontalmente os limites do mesmo. 


visible O conteúdo excedente na horizontal será exibido (padrão). 
hidden O conteúdo excedente na horizontal não será exibido. 
scroll O conteúdo excedente na horizontal não será exibido e um mecanismo rolagem 


horizontal será disponibilizado. 
auto O conteúdo excedente na horizontal não será exibido e um mecanismo rolagem 
horizontal será disponibilizado somente se necessário. 


Lorem ipsum dolor sit amet. Lorem ipsum dolor sit aj Lorem ipsum dolor sit ay 


overflow-x: visible overflow-x: hidden overflow-x: scroll 


Lorem ipsum dolor sit a Lorem ipsum. 


overflow-x: auto overflow-x: auto 
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overflow-y 


A propriedade overflow-y determina o que os navegadores devem fazer quando o contetido de 
um elemento HTML extrapola verticalmente os limites do mesmo. 


visible 
hidden 
scroll 


auto 


Lorem ipsum dolor sit 


amet, consectetur 
adipiscing elit. 


vehicula diam sit. 


O conteúdo excedente na vertical será exibido (padrão). 

O conteúdo excedente na vertical não será exibido. 

O conteúdo excedente na vertical não será exibido e um mecanismo rolagem ver- 
tical será disponibilizado. 

O conteúdo excedente na vertical não será exibido e um mecanismo rolagem ver- 
tical será disponibilizado somente se necessário. 


Lorem ipsum dolor sit Lorem ipsum dolor 


amet, consectetur sit amet, consectetur BE 
adipiscing elit. adipiscing elit. 


overflow-y: visible overflow-y: hidden overflow-y: scroll 


overflow 


Lorem ipsum dolor Lorem ipsum dolor sit 


sit amet, consectetur ES amet, consectetur 
adipiscing elit. adipiscing elit. 


overflow-y: auto overflow-y: auto 


A propriedade overflow determina o que os navegadores devem fazer quando o conteúdo de um 
elemento HTML extrapola os limites do mesmo. 


visible O conteúdo excedente será exibido (padrão). 

hidden O conteúdo excedente não será exibido. 

scroll O conteúdo excedente não será exibido e um mecanismo rolagem será disponibi- 
lizado. 

auto O conteúdo excedente não será exibido e um mecanismo rolagem será disponibi- 
lizado somente se necessário. 

no-display O elemento HTML não será exibido se o seu conteúdo extrapolar os limites do seu 
box. 

inherit Assume o valor da mesma propriedade no elemento HTML pai. 
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Lorem ipsum dolor sit amet, Lorem ipsum dolor sit aj 
consectetur adipiscing elht. consectetur adipiscing e 
Aliquam accumsan vehiqula Aliquam accumsan vehi 


suscipit turpis in sollicitudin. 


consectetur adipisci E 


Aliquam accumsan 
: bate 


overflow: visible overflow: hidden overflow: scroll 


Lorem ipsum dolor s Lorem ipsum dolor sit 
consectetur adipisci E amet, consectetur. 
Aliquam accumsan 

io 1 [uii Q 


overflow: auto overflow: auto 


Podemos determinar a região do box de um elemento HTML que deve ser exibida com a propri- 
edade clip. Essa propriedade só tem efeito sobre elementos com position: absolute. 


auto O box inteiro será exibido (padrão). 
rect(top, right, bottom, left) | Retangulo que define a região que será exibida. 
inherit Assume o valor da mesma propriedade no elemento HTML pai. 


clip: auto clip: rect(20px, 95px, 85px, 50px) 
a Exercícios de Fixacáo 


Q No projeto css, crie um arquivo chamado overflow-clip.html. 


1 |«! DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 


4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Overflow e clip</title> 

6 <link rel="stylesheet” type="text/css” hrefz"overflow-clip.css"» 

7 </head> 
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[43) No projeto css, crie um arquivo CSS chamado overflow-clip.css. 


<body> 
<div id= 


"divl"» 


<p>Lorem ipsum 
<p>Lorem ipsum 
<p>Lorem ipsum 
<p>Lorem ipsum 


</div> 


<div id= 


diy Da 


<p>Lorem ipsum 
<p>Lorem ipsum 
<p>Lorem ipsum 
<p>Lorem ipsum 


</div> 


<div id= 


Md 


<p>Lorem ipsum 
<p>Lorem ipsum 
<p>Lorem ipsum 
<p>Lorem ipsum 


</div> 


<div id= 


"div4"» 


<p>Lorem ipsum 
<p>Lorem ipsum 
<p>Lorem ipsum 
<p>Lorem ipsum 


</div> 


<div id= 
olá. 
</div> 


<img id= 
<img id= 
</body> 
</html> 


dh 


"imgl" srcz"http://www.k19.com.br/figs/main-header-logo.png"» 
"img2" srcz"http://www.k19.com.br/figs/main-header-logo.png"» 


dolor 
dolor 
dolor 
dolor 


dolor 
dolor 
dolor 
dolor 


dolor 
dolor 
dolor 
dolor 


dolor 
dolor 
dolor 
dolor 


sit 
sit 
sit 
sit 


sit 
sit 
sit 
sit 


sit 
sit 
sit 
sit 


sit 
sit 
sit 
sit 


amet, 
amet, 
amet, 
amet, 


amet, 
amet, 
amet, 
amet, 


amet, 
amet, 
amet, 
amet, 


amet, 
amet, 
amet, 
amet, 


consectetur. 
«</p> 
«</p> 
consectetur. 


consectetur 
consectetur 


consectetur. 
consectetur. 
consectetur. 
consectetur. 


consectetur. 
«</p> 


consectetur 


consectetur. 
consectetur. 


consectetur. 
consectetur. 
consectetur. 
consectetur. 


</p> 


</p> 


</p> 
</p> 
</p> 
</p> 


</p> 


</p> 
</p> 


</p> 
</p> 
</p> 
</p> 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao42.zip 


Código HTML 3.22: overflow-clip.html 


1 div { 

2 margin: 70px; 

3 width: 200px; 

4 height: 100px; 

5 border: 1px solid red; 
6 |} 

7 

8 |p { 

9 width: 270px; 

10 |) 

11 

12 |#divi { 

13 overflow: visible; 
i4 |} 

15 

16 |tdiv2 { 

17 overflow: hidden; 
18 |} 

19 

20 stdiv3 { 

21 overflow: scroll; 
22 |} 

23 
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24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 


© No Windows, utilize o Chrome para acessar o endereço: 


#div4 { 
overflow: auto; 
J 
#div5 { 
overflow: auto; 
J 
#img1 { 
position: absolute; 
top: Wp; 
left: 400px; 
(bete altos 
J 
#img2 { 
position: absolute; 
Top: SO ps; 
left: 400px; 
clip:rect(lOpx, 118px, 
J 


108px, 40px); 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao43.zip 


Código CSS 3.35: overflow-clip.css 


http://localhost/css/public_html/overflow-clip.html 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //1localhost/-«USUARIO? /css/public. html/overflow-clip.html. 


‘© Transformações 


No CSS3 foram introduzidas algumas funções para realizar as transformações de translado, es- 
calonamento, distorção e rotação nos elementos de uma página HTML. Essas funções são utilizadas 
em conjunto com a propriedade transform do CSS3. 


translate() 


O resultado da aplicação da função translate(m, n) é semelhante ao resultado obtido ao mover 
um elemento através do atributo position com o valor relative. Ao utilizar a função translate(m, n) 
um elemento é transladado a m unidades de medida da esquerda e n unidades de medida do topo. 
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Figura 3.9: Função translate() 


scale() 


A função scale(m, n) escalonará as dimensões de um elemento. O escalonamento será aplicado 
sobre a largura a uma taxa definida por m e sobre a altura a uma taxa definida por n. Caso a fun- 
ção seja chamada com apenas um parâmetro, a mesma taxa será aplicada na altura e largura do 
elemento. 


transform: scale ( 


— Original 


--mwm Escalonado 


Figura 3.10: Função scaleO 


rotate() 


A funcáo rotate(m) rotacionará um elemento em torno do seu ponto de origem. O valor de m 
deve ser dado em graus, voltas ou grado. 
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— Original 


== == Rotacionado 


Figura 3.11: Função rotate() 


skew() 


A função skew(m, n) distorcerá um elemento em relação aos eixos x e y. m en definem as distor- 
ções aplicadas nos eixos xe y respectivamente. Os valores de m en devem ser dados em graus, voltas 
ou grado. 


transform: 


o ‘ = Original 


=a === Destorcido 


Figura 3.12: Função skew() 


e Exercícios de Fixação 


(45) No projeto css, crie um arquivo chamado transformacoes.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Transformações</title> 

6 <link rel="stylesheet” type="text/css” href="transformacoes.css"> 

7 </head> 

8 <body> 
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«div id="div1"> 
translate() 
</div> 


<div id="div2"> 
scale() 
</div> 


<div id="div3"> 
rotate() 
</div> 


<div id="div4"> 
skew() 
</div> 
</body> 
</html> 


Código HTML 3.23: transformacoes.html 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-css-fixacao45.zip 


© No projeto css, crie um arquivo CSS chamado transformacoes.css. 


IM^ 

2 margin: 70px; 

3 border: 1px solid black; 

4 background-color: yellow; 

5 width: 100px; 

6 height: 100px; 

7 |} 

8 

9 sdivl ( 

10 transform: translate(50px, -20px); 
11 

12 /* Webkit: Chrome, Safari x/ 

13 -webkit-transform: translate(50px, -20px); 
14 |} 

15 

16 j#div2 ( 

17 transform: scale(0.5, 2); 

18 

19 /* Webkit: Chrome, Safari */ 

20 -webkit-transform: scale(0.5, 2); 
21 |} 

22 

23 |#div3 ( 

24 transform: rotate(15deg); 

25 

26 /* Webkit: Chrome, Safari x/ 

27 -webkit-transform: rotate(15deg); 
28 |} 

29 

30 sdiv4 ( 

31 transform: skew(10deg, -45deg); 
32 

33 /* Webkit: Chrome, Safari */ 

34 -webkit-transform: skew(10deg, -45deg); 
So ||} 

36 

37 fx Moz; Firefox */ 

38|/* substituir "webkit" por "moz" 

39 

40 |/* O: Opera x/ 

41 |/* substituir "webkit" por "o" 

42 

43 /* Ms: Internet Explorer x/ 
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44 |/* substituir "webkit" por "ms" x/ | 


Código CSS 3.36: transformacoes.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao46.zip 
@ No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/css/public html/transformacoes.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/transformacoes. html. 


‘© Transições 


Como vimos anteriormente, as regras CSS podem ser aplicadas aos elementos HTML de acordo 
com o estado atual do mesmo. Por exemplo, considere as duas regras CSS a seguir. 


div f 
width: 50px; 
height: 50px; 
J 


div:hover { 
width: 100px; 
height: 100px; 


(00-1001 UUN >=> 


} 


De acordo com as duas regras CSS acima, quando o ponteiro do mouse for colocado por cima de 
um div, a largura e a altura desse elemento HTML aumentará instantaneamente de 50px para 100px. 


height: 20px; height: 80px; 


Estado inicial Estado final 


Quando a mudanga visual de um elemento HTML é muito significativa, o resultado pode nào ser 
agradável aos usuário. A linguagem CSS possui propriedades para melhorar essas transições. 


transition-duration 


A duração das transições pode ser controlada com a propriedade transition-duration. 
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tempo A duração em segundos(s) ou milissegundos(ms). Os é o valor padrão. 


Os navegadores devem gerar, automaticamente, frames intermediários entre visual inicial e o 
final. Esses frames devem ser exibidos sequencialmente durante o tempo determinado com a pro- 
priedade transition-duration. 


width: 80px; 
height: 80px; 


width: 20px; 
height: 20px; 


transition-duration: 4s; 


transition-delay 


tempo (s) 


Podemos estabelecer um atraso para o inicio de uma transição com a propriedade transition- 
delay. 


tempo A duração em segundos(s) ou milissegundos(ms). Os é o valor padrão. 


width: 80px; 
height: 80px; 
width: 20px; transition-duration: 1500ms; 


height: 20px; 


transition-delay: 1s; 


tempo (s) 


transition-timing-function 


Os frames que foram uma transição podem ser exibidos com padrões diferentes. Por exemplo, 
uma transicáo pode iniciar devagar, no meio acelerar e terminar devagar. O padrao desejado pode 
ser determinado através da propriedade transition-timing-function. 


linear Mesma velocidade do início até o final da transição. Equivale a cubic- 
bezier(0, 0, 1, 1). 
ease O inicio da transição é lento, o meio é rápido e o final volta a ser lento (pa- 


dráo). Equivale a cubic-bezier(0.25, 0.1, 0.25, 1). 
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Valor Descrição 


ease-in O início da transição é lento. O meio e o final são rápidos. Equivale a cubic- 
| bezier(0.42, 0, 1,1) 
ease-out O início e o meio da transição são rápidos e o final é lento. Equivale a cubic- 
bezier(0, 0, 0.58, 1) 
ease-in-out | Semelhante ao valor ease com início e final mais longos. Equivale a cubic- | 
| bezier(0.42, 0, 0.58, 1). 


height: 80px; 
transition-duration: 4s; 
height: 20px; transition-timing-function: linear; 


tempo (s) 
0 4 
height: 80px; 
transition-duration: 4s; 
height: 20px; transition-timing-function: ease; 
—» tempo (s) 
height: 80px; 
transition-duration: 4s; 
height: 20px; transition-timing-function: ease-in; 
—> tempo (s) 
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height: 80px; 


transition-duration: 4s; 
height: 20px; transition-timing-function: ease-out; 


tempo (s) 


height: 80px; 


transition-duration: 4s; 
height: 20px; transition-timing-function: ease-in-out; 


transition-property 


Podemos escolher quais propriedades CSS devem ser consideradas nas transições através da pro- 
priedade transition-property. 


none Nenhuma propriedade será considerada na transicáo. | 


all . Todas as propriedades serão consideradas na transição (padrão). 
lista-de-propriedades | Lista das propriedades que devem ser consideradas na transição. | 


width: 20px; 

height: 80px; 

opacity: 1; 
width: 1px; transition-duration: 4s; 
height: 20px; transition-timing-function: linear; 
opacity: 0.3; transition-property: height, opacity; 


tempo (s) 
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ey Exercícios de Fixacáo 


© No projeto css, crie um arquivo chamado transicoes.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Transições</title> 

6 <link rel="stylesheet” type="text/css” href="transicoes.css"> 
7 </head> 

8 <body> 

9 «div id="div1"> 

10 K19 Treinamentos 

11 </div> 

12 </body> 

13 |</html> 


Código HTML 3.24: transicoes.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao48.zip 


(49) No projeto css, crie um arquivo CSS chamado transicoes.css. 


1 |#divl { 

2 margin: 300px; 

3 padding: 10px; 

4 width: 200px; 

5 height: 200px; 

6 background-color: #064e83; 

7 color: white; 

8 transition: 1s ease-in-out; 

95 

10 

11 |#divil:hover { 

12 transform: scale(4, 4) rotate(360deg); 
13 

14 /* Webkit: Chrome, Safari x/ 

15 -webkit-transform: scale(4, 4) rotate(360deg); 
16 |} 

17 

18 W* Moz; Firefox AY 

19 |/* substituir "webkit" por "moz" 
20 

21 |/* O: Opera x/ 

22 |/* substituir "webkit" por "o" 

23 

24 |/* Ms: Internet Explorer x/ 

25 |/* substituir "webkit" por "ms" x/ 


Código CSS 3.38: transicoes.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao49.zip 


o No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/css/public html/transicoes.html. 
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No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/-^«USUARIO? /css/public. html/transicoes.html. 
‘© Animações 


A partir da sua terceira versão, a linguagem CSS adicionou algumas propriedades para criação de 
animações. Essas animações são criadas através do conceito de keyframes. Nessa abordagem, de- 
vemos definir os quadros principais e os navegadores completam a animação inserindo os quadros 
intermerdiários. 


| ] | 


Keyframe Frames intermediários Keyframe 


Os quadros principais são definidos com a propriedade keyframes. A forma mais simples de 
utilização dessa propriedade é definir o primeiro e o último quadro da animação. Veja, no exemplo 
abaixo, a criação de uma animação chamada k19-animacao. 


1 |@keyframes k19-animacao { 
2 from { 

3 width: 10px; 

at J 

5 to { 

6 width: 100px; 

7 Jj 

8 |} 


Os quadros principais sao definidos de acordo com o momento no qual eles seráo exibidos. Esse 
instante é descrito como uma porcentagem do tempo total da animação. 
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Quadros gerados automaticamente Quadros gerados automaticamente 
pelo navegador pelo navegador 


So Tempo is) 
0 3 6 


Gkeyframes minha-animacao { 
0$ ( 
height: 20px; 
opacity: 0.35; 


50% { 
opacity: 1; 
} 


100% { 
height: 80px; 
opacity: 0.35; 


e Mais Sobre 
Essencialmente, as duas animações abaixo são exatamente iguais. 


@keyframes animacaol { 
from { 
width: 10px; 
Jj 
tor 
width: 70px; 
3j 


co 001» WN -— 


J 


1|Gkeyframes animacao? { 
2 0% { 

3 width: 10px; 

4 i 

5 100% { 

6 width: 70px; 

7 I 

8 |} 


Depois de definir as animações com a propriedade keyframes, devemos associá-la aos elemen- 
tos HTML através da propriedade animation-name e determinar o tempo de duração com a propri- 
edade animation-duration. 


1 [div (€ | 
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2 animation-name: k19-animacao; 
3 animation-duration: 3s; 
4 |} 

5 

6 |Gkeyframes k19-animacao { 
7 from { 

8 width: 10px; 

9 3 

10 EON 

11 width: 100px; 

12 } 

13 |} 


animation-timing-function 


Podemos determinar o padrão de exibição dos quadros de uma animação com a propriedade 
animation-timing-function. 


linear Mesma velocidade do inicio até o final da animação. Equivale a cubic- 
bezier(0, 0, 1, 1). 

ease O início da animação é lento, o meio é rápido e o final volta a ser lento (pa- 
drao). Equivale a cubic-bezier(0.25, 0.1, 0.25, 1). 

ease-in O inicio da animação é lento. O meio e o final são rápidos. Equivale a cubic- 
bezier(0.42, 0, 1, 1) 

ease-out O inicio e o meio da animação são rápidos e o final é lento. Equivale a cubic- 
bezier(0, 0, 0.58, 1) 

ease-in-out Semelhante ao valor ease com início e final mais longos. Equivale a cubic- 


bezier(0.42, 0, 0.58, 1). 
cubic-bezier(n,n,n,n) | A animação seguirá o padrão definido pela função cúbica de Bézier. 


animation-delay 


Podemos adicionar um atraso para o início de uma animação com a propriedade animation- 
delay. 


tempo A duração em segundos(s) ou milissegundos(ms). Os é o valor padrão. 


animation-iteration-count 


A quantidade de repetições de uma animação pode ser determinada com a propriedade animation- 
iteration-count. 


x O valor x é a quantidade de repetições da animação. 1 é o valor padrão. 
infinite A animação se repetirá indefinidamente. 


animation-direction 


A direção adotada na exibição de uma animação pode ser determinada através da propriedade 
animation-direction. 
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normal A animação será exibida na direção normal (padrão). 
reverse A animação será exibida na direção inversa. 
alternate A animação será exibida nas direções normal e inversa de forma alternada, 


iniciando com a direção normal 


alternate-reverse A animação será exibida nas direções normal e inversa de forma alternada, 


iniciando com a direção inversa. 


animation-play-state 


As animações podem ser pausadas ou reiniciadas através da propriedade animation-play-state. 


paused A animação parada. 
running A animação em execução. 


B Exercícios de Fixacáo 


Qo No projeto css, crie um arquivo chamado animacoes.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>K19 - Animações</title> 

6 <link rel="stylesheet” type="text/css” hrefz"animacoes.css"» 

7 </head> 

8 <body> 

9 «img id-"imgl" srcz"http://www.k19.com.br/figs/bolinha-vermelha.png"» 
10 «img id-"img2" srcz"http://www.k19.com.br/figs/bolinha-vermelha-sombra.png"» 
11 </body> 

12 «/html» 


Código HTML 3.25: animacoes.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao51.zip 


Q No projeto css, crie um arquivo CSS chamado animacoes.css. 


gimgi € 
position: absolute; 
top: px: 
left: 100px; 


z-index: 2; 

animation: animacaol 1s linear, animacao? 0.5s linear, 
animacao3 500ms linear, animacao4 500ms linear; 

animation-delay: 2s, 3s, 3.5s, 4s; 


/* Webkit: Chrome, Safari */ 

-webkit-animation: animacaol 1s linear, animacao2 0.5s linear, 
animacao3 500ms linear, animacao4 500ms linear; 

-webkit-animation-delay: 2s, 3s, 3.5s, 4s; 


md IAS X E d d 
OFWNH HOH AN AN 4» tn 
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16 |#img2 € 

17 position: absolute; 

18 top: 400px; 

19 left: 1T0Dx: 

20 rain (Ses Ne 

21 transform: scale(2,5S, 2.5); 

22 animation: animacao5 1s linear, animacao6 0.5s linear, 
23 animacao7 500ms linear, animacao8 500ms linear; 
24 animation-delay: 2s, 3s, 3.5s, 4s; 
25 

26 /* Webkit: Chrome, Safari */ 

27 -webkit-transform: scale(2.5, 2.5); 
28 -webkit-animation: animacao5 1s linear, animacao6 0.5s linear, 
29 animacao7 500ms linear, animacao8 500ms linear; 
30 -webkit-animation-delay: 2s, 3s, 3.5s, 4s; 
31 |} 

32 

33 |Gkeyframes animacaol { 

34 to t 

35 top: 310px; 

36 } 

37 |} 

38 

39 |Gkeyframes animacao2 { 

40 from { 

41 Top: 3 WOP, 

42 i 

43 to f 

44 top: BSB pxé; 

45 transform: scale(1.25, 0.75); 

46 } 

47 |} 

48 

49 |@keyframes animacao3 { 

50 from { 

51 top: 335px; 

52 transform: scale(1.25, 0.75); 

53 b 

54 foot 

55 top: 285px; 

56 transform: scale(0.75, 1,25); 

57 3 

58 |} 

59 

60 |@keyframes animacao4 { 

61 from { 

62 top: 285px; 

63 transform: scale(0.75, 1.25); 

64 2 

65 iot 

66 Top: BilOjrcs 

67 transform: scale(1, 1); 

68 3 

69 |} 

70 

71 |@keyframes animacao5 { 

72 to { 

73 transi tonm: seceareicik 5 sos 

74 } 

VENUE 

76 

77 |gkeyframes animacao6 { 

78 from ( 

79 transform: scale ().5, 1.5); 

80 E 

81 to € 

82 transform: scale(i.75. 1.755 

83 > 

84 |} 

85 
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86 |@keyframes animacao7 { 

87 from ( 

88 transform scaleti.75, 1.75Ys 

89 } 

90 CORN 

91 transform: scale(l.25. 1.25); 

92 } 

93 |} 

94 

95 |@keyframes animacao8 { 

96 Tron i 

97 transform: scale(1.25, 1.25); 

98 Jj 

99 tone 

00 transform: scale(1.5, 1.5); 

01 3 

102 |} 

103 

04 |/* Webkit: Chrome, Safari x/ 

105 

106 |@-webkit-keyframes animacaol { 

07 ice) dl 

08 top: 310px; 

109 J 

110 |} 

11 

12 |e-webkit-keyframes animacao2 { 

113 from { 

14 top: 310px; 

15 B 

116 ito 

117 iO pr px 

18 -webkit-transform: scale(1.25, 0.75); 
19 } 

120 |} 

21 

122 |@-webkit-keyframes animacao3 { 

123 from { 

124 Co pr pe; 

25 -webkit-transform: scale(1.25, 0.75); 
26 > 

127 CO E 

28 top: 285px; 

29 -webkit-transform: scale(0.75, 1.25); 
130 } 

131 |} 

32 

33 |e-webkit-keyframes animacao4 { 

134 from £ 

135 top: 285px; 

36 -webkit-transform: scale(0.75, 1.25); 
137 > 

138 159» 4f 

39 top: 310px; 

40 -webkit-transform: scale(1, 1); 

141 Jj 

142 |} 

143 

144 |@-webkit-keyframes animacao5 { 

145 tome 

46 -webkit-transform: scale(1.5, 1.5); 
147 > 

148 |) 

149 

50 |@-webkit-keyframes animacao6 { 

151 rombo 

152 =webkit-transform: scale(l.5, 1.5); 
53 3 

54 ont 

155 -webkit-transform: scale(1.75, 1.75); 
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156 } 
157 |} 
158 
159 |@-webkit-keyframes animacao7 { 
160 from { 
161 -webkit-transform: scale qi.75, 1.75); 
162 } 
163 toT 
164 -webkit-transform: scale(1.25, 1.25); 
165 3 
166 |} 
167 
168 |@-webkit-keyframes animacao8 { 
169 from { 
170 -webkit-transform: scale(1.25, 1.25); 
171 } 
172 tome 
173 -webkit-transform: scale(1.5, 1.5); 
174 } 
175 |} 
176 
177 |f* Moz; Firefox */ 
178 /* substituir "webkit" por "moz" 
179 
180 /*x O: Opera x/ 
181 /* substituir "webkit" por "o" 
182 
183 |/x Ms: Internet Explorer x/ 
184 |/x substituir "webkit" por "ms" x/ 


Código CSS 3.43: animacoes.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao52.zip 


o No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/css/public html/animacoes. html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/animacoes.html. 


‘© Seletores 


Como vimos, os seletores sao utilizados para determinar quais elementos HTML devem ser afe- 
tados por uma regra CSS. A linguagem CSS oferece uma grande variedade de seletores. 


Seletores básicos 


ECO 


Universal Seleciona todos os elementos 
Tipo e p Seleciona todos os elementos p 
Classe class .erro Seleciona todo elemento da classe erro 
ID #id #conteudo Seleciona o elemento de id conteudo 
Descendente el e2 pa Seleciona todo elemento a descendente de um ele- 
mento p 
Filho el»e2 p>a Seleciona todo elemento a filho de um elemento p 
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Irmão Adjacente el+e2 hl+p Seleciona todo elemento p imediatamente precedido 
de um elemento h1 

Irmáo el'e2 hl^p Seleciona todo elemento p precedido de um elemento 
hl 


Seletores de atributos 


[a] [min] Seleciona todos os elementos que tenham o atributo 
min definido 

[a=“v”] [min=“10”] Seleciona todos os elementos que tenham o atributo 
min igual a 10 

[a”=“v”] [title"=“k19”] Seleciona todos os elementos que possuam a palavra 
k19 no valor do atributo title 

[a*=“v”] [href^-"https"] Seleciona todos os elementos que tenham o valor do 
atributo href iniciando com https 

[a$z"v"] [href$=".css"] Seleciona todos os elementos que tenham o valor do 
atributo href terminando com .css 

lee] [title*="k19”] Seleciona todos os elementos que possuam a string 
k19 no valor do atributo title 

[al=“v"] [hrefj="https"] Seleciona todos os elementos que tenham o atributo 


href iniciando com https 


Pseudo-classes 


‘root ‘root Seleciona o elemento raiz do documento 

:nth-child(n) :nth-child(3) Seleciona todo terceiro elemento contido em algum 
outro elemento 

:nth-last-child(n) :nth-last-child(3) Seleciona todo terceiro elemento de trás para frente 
contido em algum outro elemento 

:nth-of-type(n) a:nth-of-type(3) Seleciona todo elemento a que é o terceiro elemento 
contido em algum outro elemento 

:nth-last-of-type(n) a:nth-last-of-type(3) Seleciona todo elemento a que é o terceiro elemento de 
trás para frente contido em algum outro elemento 

:first-child :first-child Seleciona todo primeiro elemento contido em algum 
outro elemento 

:Jast-child :last-child Seleciona todo último elemento contido em algum ou- 
tro elemento 

:first-of-type a:first-of-type Seleciona todo elemento a que é o primeiro elemento 
contido em algum outro elemento 

:last-of-type a:last-of-type Seleciona todo elemento a que é o Ultimo elemento 
contido em algum outro elemento 

:only-child :only-child Seleciona todo elemento que é filho único 

:only-of-type a:only-of-type Seleciona todo elemento que é o ünico filho do tipo a 


de algum outro elemento 
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‘empty ‘empty Seleciona todo elemento que nao tem contetido 
‘link a:link Seleciona todo link não visitado 

visited a:visited Seleciona todo link visitado 

active a:active Seleciona todo link ativo 

:hover a:hover Seleciona todo link sob o ponteiro do mouse 
:focus input:focus Seleciona o input que está no foco 

target ‘target Seleciona a ancora atual 

‘lang (lang) ‘lang (pt) Seleciona todos os elementos com a linguagem pt 
‘enabled input:enabled Seleciona todos os inputs habilitados 

:disabled input:disabled Seleciona todos os inputs desabilitados 

:checked input:checked Seleciona todos os inputs marcados 

:not(s) :not(.erro) Seleciona todo elemento que nào é da classe erro 


Pseudo-elementos 


‘first-line p:first-line Seleciona a primeira linha de todo parágrafo 

:first-letter p:first-letter Seleciona a primeira letra de todo parágrafo 

:before p:before Utilizado para adicionar conteúdo antes dos parágra- 
fos 

:after p:after Utilizado para adicionar conteúdo depois dos parágra- 


fos 


Prioridade de seletores 


Eventualmente, um elemento HTML é afetado por duas ou mais regras CSS. Além disso, uma de- 
terminada propriedade CSS pode ser definida com valores diferentes em duas ou mais dessas regras. 
Nesse caso, essa propriedade terá o valor definido na regra CSS de maior prioridade. Essas priori- 
dades são calculadas de acordo com os seletores utilizados nas regras CSS e na ordem em que elas 
foram definidas. 


Considere o código HTML e o código CSS a seguir. 


1 |<p id="p1" class="class1”> 
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
3 |«/p» 

aoe 

2 color: red; 

3 font-size: 14px; 

a 3} 

5 

6 jp A 

7 color: blue; 

8 |} 


Perceba que todo elemento p é afetado pelas duas regras CSS acima. Nessas duas regras, a pro- 
priedade color foi definida com valores diferentes. Os seletores dessas duas regras possuem a mesma 
importáncia. Nesse caso, a ültima regra tem maior prioridade. Portanto, o texto do parágrafo será 
exibido em azul. 
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A propriedade font-size nao entrou em conflito, pois foi definida em apenas uma das regras CSS. 
Portanto, o tamanho da fonte do texto do parágrafo será 14px. 


Agora, suponha que o código CSS seja o seguinte: 


elas É 
color: red; 
font-size: 14px; 


} 


pt 


color: blue; 


ON OOF UN 


} 


Observe que o parágrafo do exemplo é afetado pelas duas regras CSS acima. Nesse caso, qual será 
a cor do texto do parágrafo? A resposta correta é vermelho. Isso ocorre, pois os seletores de classe 
possuem importância maior que os seletores de tipo. 


Conforme a complexidade dos seletores utilizados em nossas regras CSS aumenta, a dificuldade 
em determinar qual deles possui maior importáncia também aumenta. Por isso, devemos seguir o 
algoritmo definido na especificação da linguagem CSS para determinar a importância dos seletores. 
Nesse algoritmo, os seletores obterão uma pontuação em quatro critérios diferentes. 


A: Caso as propriedades sejam definidas através do atributo style, a pontuação nesse critério será 1. 
Caso contrário será 0. 


B: A pontuação nesse critério será a quantidade de seletores de ID que formam o seletor da regra 
css. 


C: A pontuação nesse critério será a soma das quantidades de seletores de classe, de atributos e de 
pseudo-classes que formam o seletor da regra CSS. 


D: A pontuação nesse critério será a soma das quantidades de seletores de tipo e de pseudo-elementos 
que formam o seletor da regra CSS. 


O critério A possui prioridade sobre o critério B, que por sua vez possui prioridade sobre o critério 
C, que por sua vez possui prioridade sobre o critério D. Veja nas imagens abaixo, um exemplo de 
como calcular a pontuação dos seletores. 


Cc B G B C B (03 D D D C 


color: red 
Pontuação: O {3 | , , 
A B C D 
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D D (03 D D Cc B (03 B Cc B 
[sisssi] Faif[vieited] inputs] « 
ed; 


color: r 
Pontuação: O , : 
A B c p 


No critério A, as duas regras obtiveram a mesma pontuacáo. Como ocorreu um empate, devemos 
analisar o critério seguinte. No critério B, houve outro empate. Portanto, devemos analisar o próximo 
critério. No critério C, a primeira regra possui uma pontuação maior. Dessa forma, o seletor da 
primeira regra possui maior importância fazendo com que essa regra tenha maior prioridade. 


} 


ex Exercícios de Fixacáo 


o No projeto css, crie um arquivo chamado seletores-basicos.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Seletores - 1</title> 

6 <link rel="stylesheet” type="text/css” href="seletores-basicos.css"> 
7 </head> 

8 <body> 

9 <div id="conteudo”> 

10 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
11 

12 <ul> 

13 <li>Item 1«/li» 

14 «li class="cancelado">Item 2«/li» 

15 eis 

16 Item 3 

17 «ul» 

18 <li>Subitem 1</li> 

19 «li»Subitem 2«/li» 

20 «/ul» 

21 «/li» 

22 «li class="cancelado">Item 4«/li» 

23 «/ul» 

24 

25 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
26 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
27 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
28 </div> 

29 </body> 

30 |</html> 


Código HTML 3.27: seletores-basicos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao54.zip 


o No projeto css, crie um arquivo CSS chamado seletores-basicos.css. 


ND | 
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2 margin: Opx; 

3 padding: Opx; 

4 |} 

5 

6 |body € 

7 background-color: #ddd; 
8 |} 

9 

10 |#conteudo ( 

11 width: 800px; 

12 margin: 0 auto; 

13 background-color: white; 
14 border: 1px solid #333; 
15 padding: 10px; 

16 |) 

17 

18 .cancelado ( 

19 text-decoration: line-through; 
20 |} 

21 

22 [ume 

23 padding: 0 0 0 40px; 

24 |} 

25 

26 jul li { 

27 color: blue; 

28 |} 

29 

30 |}#conteudo > ul > li ( 

31 margin: 0 0 20px 0; 

32 |} 

33 

34 jul + p { 

35 color: red; 

36 |} 

37 

38 [UNES 

39 font-style: italic; 

40 |} 


Código CSS 3.46: seletores-basicos.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao55.zip 
o No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/css/public_html/seletores-basicos.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/seletores-basicos.html 


(57) No projeto css, crie um arquivo chamado seletores-de-atributos.html. 


«a href="#a-link”">Link 1</a> 


EN 


content="text/html; charset=UTF-8"> 


<link rel="stylesheet” type="text/css” hrefz"seletores-de-atributos.css"» 


1 «!DOCTYPE html» 

2 «html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content -Type” 

5 <title>K19 - Seletores - 2</title> 
6 

7 </head> 

8 <body> 

9 

0 


<a href="#b-link” title="Link para a página 2"»Link 2</a> 
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11 <a href="#link-c” title-"Página 3"»Link 3</a> 

12 «a href="#link-d” title="Link para a página 4">Link 4</a> 
13 «a href="#link-e” title="Link para a pagina da K19 Treinamentos"»Link 5</a> 
14 <a href="#links-f"” title="Link para a pagina 6"»Link 6</a> 
15 <a href="#link” title="Link para a página 7">Link 7</a> 

16 

17 <hr> 

18 

19 «img src="http://www.k19.com.br/figs/main-header -logo. png” 
20 title="Logo da K19"> 

21 «img srcz"http://www.k19.com.br/figs/k01-logo-large.png"» 
22 «img srcz"http://www.k19.com.br/figs/k02-logo-large.png"» 
23 </body> 

24 |</html> 


Cédigo HTML 3.28: seletores-de-atributos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao57.zip 


© No projeto css, crie um arquivo CSS chamado seletores-de-atributos.css. 


[title] { 
border: 4px solid red; 


} 


[title=’Pagina 3’] { 
color: green; 


} 


[Eatigdlerem ? CIL a] 4 
padding: 10px; 
background: yellow; 


à 


à 


à 


» 


à 


à 


[title‘=’Link’] { 
Margin-right: 30px; 


à 


à 


} 


à 


à 


ONANAPWNH HK TOWANDA 3» 00 n2 = 


[href$z'link'] { 
outline: 4px solid blue; 


à 
Ke 


} 


[srcx=’large’] { 
border: 4px solid green; 


NNN h2 
Ww N= oO 


N 
Az 


} 


[href |=’#link’] { 
font-size: 30px; 


NNN h2 
CoN DWI 


n 


Código CSS 3.47: seletores-de-atributos.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao58.zip 


(59) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/seletores-de-atributos.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/seletores-de-atributos.html. 
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© No projeto css, crie um arquivo chamado seletores-de-pseudo-classes.html. 


1 |<!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Seletores - 3</title> 

6 <link rel="stylesheet” type="text/css” href="seletores-de-pseudo-classes.css"> 
7 </head> 

8 <body> 

9 <hl id="seletores-3-ancora"> 

10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

11 </h1> 

12 

13 <ul id-"listal"» 

14 <li>Item 1«/li» 

15 <li>Item 2</li> 

16 <li>Item 3</li> 

17 </ul> 

18 

19 «ul id="lista2"> 

20 <li>Item 1«/li» 

21 <li>Item 2</li> 

22 <li>Item 3«/li» 

23 <li>Item 4«/li» 

24 <li>Item 5«/li» 

25 </ul> 

26 

27 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

28 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

29 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

30 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

31 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

32 

33 <div> 

34 «hi»Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> 
35 <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> 
36 <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> 
37 </div> 

38 

39 <div> 

40 «hi»Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> 
41 </div> 

42 

43 <div> 

44 <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> 
45 <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3> 
46 <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3> 
47 </div> 

48 

49 <div></div> 

50 

51 <div> 

52 <a href="#seletores-3-ancora”>Link 1</a> 

53 «a hrefz"http://www.k19.com.br"»Link 2</a> 

54 </div> 

55 

56 <div> 

57 <input type="text"> 

58 <input type="text” disabled> 

59 <input type="text"> 

60 </div> 

61 

62 <div> 

63 <input type-"checkbox"» 

64 <input type="checkbox” checked> 

65 <input type="checkbox”> 

66 </div> 

67 

68 <ul lang="es"> 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao60.zip 


«li»Item 1«/li» 
<li>Item 2«/li» 
<li>Item 3«/li» 


«ul langz"en"» 
<li>Item 1«/li» 
<li>Item 2</li> 
«li»Item 3«/li» 

«/ul» 


«ol langz"en"» 
<li>Item 1«/li» 
<li>Item 2</li> 
«li»Item 3«/li» 

«/ol» 

</body> 
</html> 


Código HTML 3.29: seletores-de-pseudo-classes.html 


@ No projeto css, crie um arquivo CSS chamado seletores-de-pseudo-classes.css. 


1 rook É 

2 font-size: 30PX; 

3 5 

4 

5 |#listal li:first-child { 
6 colori red: 

7B 

8 

9 |#listal li:last-child { 
10 color: blue; 

1 

12 

13 |#lista2 li:nth-child(2) { 
14 color: magenta; 

15 |} 

16 

17 |#lista2 li:nth-last-child(2) { 
18 color: orange; 

19 |} 

20 

21 |p: first-of-type { 

22 color: yellow; 

23 |} 

24 

25 |p:last-of-type { 

26 color: aqua; 

E) |» 

28 

29 p:nth-of-type(2) { 

30 color: firebrick; 

Si [m 

32 

33 |p:nth-last-of-type(2) { 
34 color: lawngreen; 

So |) 

36 

37 |:only-child { 

38 border: 4px solid red; 
39 |) 

40 

41 |h2:only-of-type { 

42 color: plum; 

236 www.k19.com.br m KIS 


237 CSS 


43 |} 

44 

45 |: empty { 

46 height: 20px; 

47 border: 4px dashed black; 
48 |} 

49 

50 |a: link { 

51 color: springgreen; 

52 font-weight: bold; 

53 |} 

54 

55 la: visited { 

56 color: HCCC; 

57 |} 

58 

59 Ja: active { 

60 color: orange; 

61 |} 

62 

63 la: hover { 

64 color: fuchsia; 

65 |} 

66 

67 [input Focus { 

68 background-color: red; 
69 color: white; 

70 |) 

71 

72 [target t 

73 border: 4px solid magenta; 
74 color: purple; 

75 |} 

76 

77 |:lang(en) { 

78 color: red: 

79 |} 

80 

81 |: enabled ( 

82 outline: 4px solid red; 
83 |} 

84 

85 |:disabled ( 

86 outline: 4px solid blue; 
87 |} 

88 

89 |: checked { 

90 outline: 4px solid green; 
91 |} 

92 

93 |:not(ul) > li { 

94 padding-left: 100px; 
95 |} 


Código CSS 3.48: seletores-de-pseudo-classes.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao61.zip 


Q No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public html/seletores-de-pseudo-classes.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/seletores-de-pseudo-classes.html. 


m K | cS www.facebook.com/k19treinamentos 237 


CSS 238 


[63] No projeto css, crie um arquivo chamado seletores-de-pseudo-elementos.html. 


1 |<!DOCTYPE html» 

2 |<html lang="pt-br”> 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Seletores - 4</title> 

6 <link rel="stylesheet” type="text/css” hrefz"seletores-de-pseudo-elementos.css"» 
7 </head> 

8 <body> 

9 «hi»Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> 
10 

11 <p> 

12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

13 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 

14 sit amet sodales quam massa sit amet risus. Fusce malesuada 

15 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 

16 leo nunc, in ornare turpis aliquam quis. 

17 </p> 

18 </body> 

19 |</html> 


Código HTML 3.30: seletores-de-pseudo-elementos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao63.zip 


Q No projeto css, crie um arquivo CSS chamado seletores-de-pseudo-elementos.css. 


p:first-line { 
background-color: yellow; 


} 


p-rtipst-letter f 
font-size: 5px: 


} 


h1:before { 
conuenit YS es 
color: red; 


» 


hi:after { 
contenta: 
color: red; 


ee ae ee ee aa 
NOonPWN HH CWO AN DAN PWD — 


Código CSS 3.49: seletores-de-pseudo-elementos.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao64.zip 


© No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/css/public_html/seletores-de-pseudo-elementos.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/~<USUARIO>/css/public_html/seletores-de-pseudo-elementos.html. 


‘© Media Queries 
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Media Types 


No momento em que definimos as regras CSS dos nossos documentos, também podemos de- 
terminar para quais tipos de mídia essas regras seráo válidas, ou seja, podemos decidir quais regras 
seráo aplicadas quando o documento for apresentado em uma tela, no papel ou narrado por um 
sintetizador de voz, por exemplo. Podemos informar o tipo de mídia de duas formas: com o atributo 
media do elemento link ou com a regra media do CSS. 


1 |<link rel="stylesheet” type="text/css” href="aquivo.css” media="screen"p> 


@media screen { 
body { 
background-color: black; 


) 


NO PWD 


A linguagem CSS define os seguintes tipos de midia. 


all Todos os tipos de midia. 

braille Dispositivos em braille com resposta a toques. 

embossed Impressoras em braille. 

handheld Dispositivos portáteis (exceto smartphones mais modernos). 

print Impressoras convencionais. 

projection Projetores. 

screen Tela de computadores, smartphones ou algum dispositivo do género. 
speech Sintetizadores de voz. 

tty Dispositivos de grades com caracteres de tamanho fixo (teletypes, terminal 


ou dispositivos com limitações de exibição). 
tv Televisores. 


Podemos definir as mesmas regras CSS para diversos tipos de mídia. Para isso devemos separar 
esses tipos por vírgula. 


1|«link rel="stylesheet” type="text/css” hrefz"aquivo.css" (media="screen, print" 
1 (&media screen, print] { 

2 body { 

3 background-color: black; 

4 3 

5 

6 

dy 

Media Groups 


Algumas propriedades não são aplicáveis a determinados tipos de mídia. Por exemplo, a propri- 
edade width não pode ser aplicada à mídia speech. Por outro lado, algumas propriedades podem 
ser aplicadas à diversas mídias. Por exemplo, a propriedade position pode ser aplicada às mídias 
screen, projection, handheld, print, tty e tv. 
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Para identificar, mais facilmente, quais propriedades podem ser aplicadas a um determinado 
tipo de mídia, a especificacáo da linguagem CSS divide em grupos os diversos tipos de mídia. 


Confira na tabela a seguir a relação entre os tipos de mídia e os grupos de mídia: 


Media Groups 


continuous e paged | visual, audio, speech e tactile | grid e bitmap interactive e static 

braille continuous tactile grid ambos 

embossed paged tactile grid static 

handheld ambos visual, audio, speech ambos ambos 

print paged visual bitmap static 

projection paged visual bitmap interactive 

screen continuous visual, audio bitmap ambos 

speech continuous speech nenhum ambos 

tty continuous visual grid ambos 

tv ambos visual, audio bitmap ambos 


Propriedades específicas 


Os tipos de mídia do CSS permitem definir diferentes regras para cada tipo de mídia. Entretanto, 
eventualmente é necessário definir regras CSS de acordo com características mais específicas dos 
dispositivo de saída. Para isso, devemos utilizar as chamadas media queries. Veja o seguinte exem- 
plo. 


1|Gmedia screen and (min-width: 500px) { 


3 |} 


No exemplo acima, as regras CSS serão aplicadas caso o tipo de mídia utilizado seja screen e a 
área de renderização do documento (viewport) tenha, no mínimo, 500 pixels de largura. Como vimos 
as media queries também podem ser definidas através do atributo media do elemento link. 


«link 
rel-"stylesheet" 
type="text/css” 
hrefz"arquivo.css" 
[media="screen and (min-width: 500px)"y» 


qRwNnNa 


No exemplo abaixo, o código dentro da regra media será aplicado quando a largura do viewport 
for pelo menos 500 pixels ou quando a orientação for portrait. 


1 |Gmedia (min-width: 500px), (orientation: portrait) { 


3 |} 


Eventualmente, uma media query pode nào fazer sentido. Considere o seguinte exemplo. 


1 |@media speech and (min-width: 500px) { 


3 |} 
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No exemplo acima, a media query é contraditória, pois o tipo de midia speech nào é compativel 
com a propriedade min-width. Dessa forma, o código CSS definido dentro da regra media nunca 
será processado. 


Veja a seguir algumas propriedades que podemos utilizar nas media queries 


Propiedad Descrição Valor eda ine inom 


Determina qual deve seralargurado Medidas visual e p? sim 
viewport no dispositivo de saída. 

height Determina qual deve ser a altura do ^ Medidas visual e tactile sim 
viewport no dispositivo de saída. 

device-width Determina qual deve ser alargura da ^ Medidas visual e tactile sim 
tela do dispositivo de saída. 

device-height Determina qual deve ser a altura da ^ Medidas visual e tactile sim 
tela do dispositivo de saída. 

orientation Verifica se o viewport está na orien- | portrait ou lands- | bitmap nao 


tacáo portrait (retrato) oulandscape | cape 


(paisagem). 

aspect-ratio Determina a razão entre as proprie- _inteiro/inteiro bitmap sim 
dades width e height. 

color-index Determina o nümero de cores do | inteiro visual sim 


dispositivo de saída. 
resolution Determina a resolução do disposi- dpi bitmap sim 
tivo de saída. 


p Exercícios de Fixacáo 


[66] No projeto css, crie um arquivo chamado media-types.html. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - Media Types</title> 
<link rel="stylesheet” type="text/css” hrefz"media-types.css"» 
</head> 
<body> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</body> 
</html> 


— COAN DUO FRWHNH 


uem, 


Código HTML 3.34: media-types.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css- fixacao66.zip 


[67] No projeto css, crie um arquivo CSS chamado media-types.css. 


1 |Qmedia all { 


2 pt 
3 font-size: 50px; 


29) K | S www.facebook.com/k1 9treinamentos 241 


CSS 


242 


à 


} 


à 


à 


à 


à 


à 


à 


} 


à 
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à 


à 
Kej 


NNNN 
C) po = C 


} 


@media screen { 


p 


) 


@media print { 


p 


) 


@media handheld, screen and (max-device-width:480px) { 


p 


} 


t 


color: pedi; 


t 


color: blue; 


{ 


color: green; 


Código CSS 3.55: media-types.css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao67.zip 


© No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/css/public html/media-types.html 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //1localhost/-«USUARIO? /css/public. html/media-types.html. 


‘© Sprites 


Normalmente, uma pagina web é formada por diversas imagens pequenas ou médias. Se essas 
imagens forem adicionadas com o elemento img, o navegador realizará uma requisicáo HTTP para 
cada imagem. Consequentemente, o tempo de carregamento da página será alto devido a quanti- 
dade de requisições e ao overhead dos pacotes HTTP. 


81 Analogia 


agem para trazer cada um deles. 


e Adicionar individualmente imagens pequenas ou médias em uma página web é como 
77 ter quer comprar diversos itens pequenos ou médios no supermercado e fazer uma vi- 


Uma técnica amplamente utilizada para melhorar o tempo de carregamento das páginas web é 


denominada sprite. Essa técnica consiste em agrupar todas as imagens pequenas e médias em uma 
ünica imagem grande e depois "recortá-la" com as propriedades CSS. 
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~E E 
d 
O X 4 
A 5] 
hel LW 
cursos-icones.png 
A k z z x 
$ A AN VA 
" ^. K q ae 
NA) AS AN VAS 
background-image: url('cursos-icones.png'); background-image: url('cursos-icones.png'); 
background-position: Opx Opx; background-position: -100px -100px; 
2.9 e ~ 
p^ Exercícios de Fixacáo 
[69] No projeto css, crie um arquivo chamado sprites.html. 
1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Sprites</title> 
6 <link rel="stylesheet” type="text/css” href="sprites.css"> 
7 </head> 
8 <body> 
9 <ul> 
10 <li>K11 - Orientação a Objetos em Java</li> 
11 «li class="k12">K12 - Desenvolvimento Web com JSF2 e JPA2«/li» 
12 <li class="k21">K21 - Persistência com JPA2 e Hibernate</li> 
13 <li class="k22">K22 - Desenvolvimento Web Avançado com JSF2, EJB3.1 e CDI</li> 
14 <li class="k23">K23 - Integração de Sistemas com Webservices, JMS e EJB</li> 
15 <li class="k20">K20 - Formação Desenvolvedor Java Avançado</li> 
16 </ul> 
17 </body> 
18 |</html> 
Código HTML 3.35: sprites.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao69.zip 
(70) No projeto css, crie um arquivo CSS chamado sprites.css. 
1 li:before { 
2 content: Pr: 
3 display: inline-block; 
4 width: 44px; 
5 height: 44px; 
6 vertical-align: middle; 
7 background-image: url("http://www.k19.com.br/figs/k19-logos-sprite.png"); 
8 background-repeat: no-repeat; 
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9 |} 

10 

11 |li.k12:before { 

12 background-position: -44px 0px; 
13 |} 

14 

15 |li.k21:before É 

16 background-position: -88px Opx; 
17 |} 

18 

19 li.k22:before ( 

20 background-position: Opx -44px; 
21 |} 

22 

23 |1li.k23:before { 

24 background-position: -44px -44px; 
25 |} 

26 

27 |li.k20:before { 

28 background-position: -88px -44px; 
29 |} 


Código CSS 3.56: media-types.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-fixacao70.zip 


@ No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/css/public html/sprites.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //1localhost/-«USUARIO? /css/public. html/sprites.html 


X Gradientes (Conteúdo Extra) 


Até a versão 2 do CSS, não era possível definir um gradiente de cores como background de um 
elemento a não ser através de imagens estáticas (jpg, gif ou png). A partir da versão 3, podemos defi- 
nir um gradiente diretamente no código CSS através das funções linear-gradient, repeating-linear- 
gradient, radial-gradient e repeating-radial-gradient. 


De acordo com a especificação CSS, os gradientes são semelhantes às imagens. Eles podem ser 
definidos em qualquer propriedade que aceite uma imagem como valor. 


>>, Mais Sobre 
Até o momento do fechamento da versão atual desta apostila, o navegador Firefox 
só suporta as funções de gradiente nas propriedades background ou background- 
image. 


Gradiente linear 


Para definir um gradiente linear, é necessário utilizar a função linear-gradient. 
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Definição da T Lista de 
linha do gradiente e paradas de cores i 
i i 

li l 


<parada-de-cor> [, <parada-de-cor>]+ 


) 


<angulo> <lado-ou-canto> 

Representa o ângulo de inclinação do gradiente. Representa a região do box do gradiente na qual a última 
<parada-de-cor> será posicionada. É formado pelos pares de 
lados left | right e/ou top | bottom, não importando a ordem em 
Representa uma cor e a posição em que ela deve que aparecem. A primeira <parada-de-cor> será posicionada na 
aparecer sobre a linha do gradiente. região simetricamente oposta a da última <parada-de-cor>. 


<parada-de-cor> 


No exemplo abaixo, podemos entender melhor cada um dos parâmetros: 


p E \ Linha do gradiente 
linear-gradient(to top left, green, yellow) / 


E Io E parada de cor (ending point) 


topleft _-- 


Primeira parada de cor (starting point) e E 


Veja mais alguns exemplos: 


linear-gradient(to top right, green 50$, yellow) 


linear-gradient(135deg, green, white, blue) 


Repare que quando a primeira parada de cor começa em uma posição diferente de 0%, o gradi- 
ente é preenchido com a cor da primeira parada de cor do 0% até essa posição. 


Gradiente linear com repeticáo 


Para definir um gradiente linear com repetição, devemos utilizar a função repeating-linear-gradient 
que recebe exatamente os mesmos parámetros da funcáo linear-gradient. 


A princípio o gradiente linear com repeticáo funcionará da mesma forma que o gradiente linear. 
Seu comportamento só será alterado nas seguintes situações: 


* Sea primeira parada de cor não começar em 0%. 
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* Sea ultima parada de cor nào terminar em 100%. 


Se uma ou as duas situacóes ocorrerem, o gradiente se repetirá para completar as regides da linha 
do gradiente sem cores definidas. 


Veja alguns exemplos: 


linear-gradient(to top left, green, yellow) 


repeating-linear-gradient(to top left, green, yellow) 


linear-gradient(to top left, green 50$, yellow) 


repeating-linear-gradient(to top left, green 50$, yellow) 


linear-gradient(to top left, green, yellow 50%) 


repeating-linear-gradient(to top left, green, yellow 50%) 


Gradiente radial 


Para definir um gradiente radial, devemos utilizar a funcáo radial-gradient. 


Definição da forma, dimensão e posicáo do gradiente 


l 

I 

i) 

i) I 
radial-gradient(,[ 

! [circle || <tamanho>] [at <posição>]?, Fi 

I 

I 

I 

l 

l 


[ellipse || [<tamanho> | <porcentagem>]{2}] [at <posição>]?, | 


l 
I 
4 [[circle | ellipse] || <alcance> ] [at <posição>]?, | 
I at <posição>, 
1]? 


| <parada-de-cor>, [, <parada-de-cor>]+) 


l 
i Lista de paradas de cores 
I 
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<tamanho> | <porcentagem> Xposicáo» 

Representa o tamanho do raio da forma do gradiente. Representa a posição do box do gradiente na qual a primeira 
No caso da elipse, o tamanho pode ser dado através <parada-de-cor> será posicionada. Pode ser informada através 
da porcentagem em relação ao tamanho do box do dos pares de lados left | right e/ou top | bottom, não importando 
gradiente. a ordem em que aparecem. Também pode receber o valor 


center, que é o padrão. A posição também pode ser informada 
através de coordenadas em relação ao canto superior esquerdo 
do box do gradiente. 


<parada-de-cor> 

Representa uma cor e a posição em que ela deve 

aparecer sobre a linha do gradiente. 
<alcance> 


Representa a forma como o gradiente será distribuído dentro do 
box do gradiente. 
No exemplo abaixo, podemos entender melhor cada um dos parâmetros: 


radial-gradient (50% 50% at center, green, white) 


Forma do gradiente 


Box do gradiente Linha do gradiente 


Primeira parada de cor Última parada de cor 


Gradiente radial com repetição 


Para definir um gradiente radial com repetição, devemos utilizar a função repeating-radial-gradient 
que recebe exatamente os mesmos parâmetros da função radial-gradient. 


A princípio o gradiente radial com repetição funcionará da mesma forma que o gradiente radial. 
Seu comportamento só será alterado nas seguintes situações: 


* Sea primeira parada de cor não começar em 0%. 


* Se a última parada de cor não terminar em 100%. 


Se uma ou as duas situações ocorrerem, o gradiente se repetirá para completar as regiões da linha 
do gradiente sem cores definidas. 


Confira o exemplo: 


radial-gradient (black 0%, white 25%) 
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repeating-radial-gradient (black 0%, white 25%) 


X Herança (Conteúdo Fxtra) 


Herança em CSS é o mecanismo pelo qual os valores de algumas propriedades são passadas de 
um elemento pai para um elemento filho. Os valores de algumas propriedades são herdados au- 
tomaticamente enquanto outros não. Além disso, existem propriedades que não podem assumir o 


valor proveniente da mesma propriedade do elemento pai. 
Uma propriedade herda o valor do elemento pai quando atribuimos o valor inherit à ela. 


Considere os seguintes códigos: 


1 «div» 

2 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
3 |«/div» 

1|div { 

2 color: red; 

3 5 


No exemplo acima, a propriedade color foi definida apenas para o elemento div. No elemento p, 
essa propriedade assumirá o valor padrão que é inherit, ou seja, será herdado automaticamente do 


elemento pai. Como consequência a cor do texto do parágrafo será vermelha. 


Agora, considere este outro exemplo: 


1 «div» 

2 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
3 |«/div» 

1|div { 

2 border: 1px solid red; 

3 5 


O elemento div terá borda de 1 pixel com cor vermelha. Diferentemente do exemplo anterior, o 
parágrafo não herdará o valor para a propriedade border, pois ela não possui o valor inherit como 
padrão. Se quiséssemos que o elemento p herdasse o valor da propriedade border, deveríamos defi- 


nir as seguintes regras CSS: 


T [eli xf 

2 border: 1px solid red; 
3 |} 

4 

spt 

6 border: inherit; 

7 |j 
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X box-sizing (Conteüdo Extra) 


De acordo com o box model, devemos levar em consideracáo as margens internas, bordas e as 
propriedades width e height de um elemento para determinarmos as suas dimensões. No começo, 
isso pode nào parecer muito natural, pois tendemos a imaginar a largura e altura final do elemento 
como sendo as medidas atribuídas somente às propriedades width e height, respectivamente. Isso 
acaba gerando uma grande confusão, principalmente para quem está começando a aprender CSS. 


Através da propriedade box-sizing podemos decidir como as propriedades width e height se 
comportarão. Confira na tabela abaixo os possíveis valores da propriedade: 
content-box 

Comportamento padrão. As propriedades width e height definem as dimensões da área do con- 
teúdo do elemento. 
padding-box 

As propriedades width e height definem as dimensões da área do conteúdo do elemento em 
conjunto com as margens internas. 
border-box 

As propriedades width e height definem as dimensões da área do conteúdo do elemento em 
conjunto com as margens internas e bordas. 
inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 

Veja a figura abaixo para compreender melhor cada um dos valores: 


box-sizing: content-box box-sizing: padding-box box-sizing: border-box 


E e rM ilm x Errem 


lee width T l T width T l | T width il i 
padding padding ik padding ül 
border border border 


X Design Responsivo (Conteúdo Extra) 
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Durante muito tempo, os computadores tradicionais (desktops e laptops) foram os principais 
dispositivos de acesso à Internet. Nos ültimos anos, uma grande variedade de novos equipamentos 
capazes de acessar a Internet foram introduzidos no mercado. Desses dispositivos podemos destacar 
os smartphones e tablets (dispositivos móveis). 


O nümero de usuários que acessam a Internet através de dispositivos móveis está cada vez maior 
e só tende a crescer. Portanto, os desenvolvedores web devem ficar cada vez mais preocupados em 
atender de maneira satisfatória o publico mobile. 


Atender o público mobile de maneira satisfatória significa apresentar o conteúdo de uma página 
utilizando da melhor forma possível os recursos do dispositivo. 


Por exemplo, uma página pode ter uma usabilidade muito boa quando acessada através de um 
desktop. Porém, ao acessá-la através de um smartphone, as letras podem ficar muito pequenas, o 
conteúdo pode não se encaixar no tamanho da tela ou as interações através do toque podem não 
funcionar tão bem se comparadas às interações realizadas com o mouse. 


Uma solução para esse problema seria a criação de uma versão do site para cada tipo de disposi- 
tivo. Geralmente, a versão para desktop é a mais completa e as demais possuem recursos reduzidos. 
Essa é uma solução adotada por diversos sites. Normalmente, as versões mobile são acessadas atra- 
vés de URLs específicas. Em geral, essas URLs começam com mobile, mob ou até mesmo m (ex: 
http: //m.kekanto.com). Entretanto, antes de adotar essa solução devemos levantar algumas ques- 
tões: 


Como fica a manutenção do site? 


Muito mais trabalhosa. Basicamente, para cada tipo de dispositivo, teríamos um site diferente, 
ou seja, teríamos que gerenciar dois ou mais sites ao invés de apenas um. 


O que fazer com as URLs do site? 


Para cada tipo de dispositivo uma URL diferente. Por exemplo, uma para mobile (http: //mob. 
dominio. com), outra para televisores (http: //tv. dominio. com) e outra para desktops (http://www. 
dominio. com). Além disso, deveríamos nos preocupar com o redirecionamento das URLs, pois seria 
mais apropriado que um usuário acessando o endereço www. dominio. com através de sua televisão 
fosse redirecionado para tv. dominio. com. 


O usuário vai ficar insatisfeito se ele não puder fazer tudo que ele fazia no desktop? 


Sim! Se a versão diferenciada for uma versão reduzida da versão desktop, ele ficará extremamente 
decepcionado. Os usuários tendem a querer ter todo o poder do desktop nos smartphones e afins. 


Para evitar esses e outros problemas, uma outra solução que está ganhando cada vez mais força 
parte do princípio de que a página deve ser a mesma. O que deve mudar é a forma de apresentá-la 
ao usuário. Essa é a ideia do Design Responsivo. 


O design responsivo pode ser dividido em três partes principais: layouts flexíveis, media queries 
e mídias flexíveis. A seguir iremos discutir sobre cada parte. 
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Layouts Flexiveis 


A ideia por tras dos layouts flexíveis é fazer com que os elementos de uma página sejam capazes 
de terem as suas dimensóes adaptadas dinamicamente. Isso é bem interessante quando queremos 
que o layout da página se adapte a diferentes tamanhos de tela ou alguns elementos sejam redimen- 
sionados após uma interacáo do usuário, por exemplo. 


Quando criamos layouts estáticos, em geral, trabalhamos com unidades de medida estáticas 
como px, pt, in, cm e etc. Ao criarmos layouts flexíveis passamos a trabalhar muito mais com as 
unidades relativas como %, em, ex e etc. Fazemos isso para evitar que ocorram deformações ou 
overflow na apresentação do conteúdo. 


Para facilitar o trabalho de quem desenhará o layout de uma página e também de quem pro- 
duzirá o código HTML e CSS, uma técnica muito comum é a de tentar visualizar a tela como um 
sistema de grades. Nesse sistema, cada grade deve ter as suas dimensões definidas com unidades de 
medida relativas. Dessa forma, se a tela do usuário for redimensionada, todo o sistema de grade será 
reajustado. 


-) & ) GD « 


- 
E 
L 
- 
1 
I 


Layout estático 


= 
GP) @ > 
A 


Nie 


Layout flexível 


Media Queries 


Como o objetivo do design responsivo é apresentar o conteüdo de uma página de maneiras dife- 
rentes em dispositivos com tamanhos de telas diferentes, em algum momento sentiremos a necessi- 
dade de criar regras CSS para cada tamanho de tela ou para cada conjunto de tamanho de telas. Em 
uma situação como essa, as media queries se encaixam perfeitamente e devemos utilizá-las. 


Breakpoints 


O ponto principal da relação das media queries com o design responsivo é a definição daquilo 
que chamamos de breakpoints (pontos de quebra). Muitos autores costumam definir esses pontos 
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em torno dos tamanhos dos viewports mais comuns como 320px, 480px, 768px, 1024px e assim por 
diante. Essa é uma estratégia normalmente chamada de device-driven breakpoints, device-based 
breakpoints ou pontos de quebra orientados à dispositivos. Evite essa técnica, pois, como o proprio 
nome diz, ela faz com que as regras CSS sejam aplicadas quando uma pagina for aberta em dispositi- 
vos com tamanhos de tela esperados, ou seja, a pagina poderá estar despreparada quando for aberta 
por um dispositivo com tela de 400px, por exemplo. 


Uma estratégia muito mais interessante é a que chamamos de content-driven breakpoints, content- 
based breakpoints ou pontos de quebra orientados ao contetido. Nessa estratégia definimos os pon- 
tos de quebra observando se o contetido da página se acomoda corretamente ao tamanho do view- 
port. Uma técnica muito eficiente é comecar do menor para o maior tamanho de viewport. Em geral, 
o menor tamanho refere-se aos dispositivos mobile e, por isso, a técnica recebe o nome de mobile 
first. 


Aplicar a estratégia do content-drive breakpoints juntamente com a técnica mobile first é re- 
lativamente simples: redimensione a janela do navegador para que o viewport fique com o menor 
tamanho esperado (mobile). Esse será o primeiro breakpoint. Aplique as regras CSS na página e em 
seguida redimensione a janela do navegador até que o contetido nào seja apresentado corretamente 
ou a página tenha o layout "quebrado". Quando isso ocorrer significa que encontramos o próximo 
breakpoint. Nesse breakpoint, aplique as regras CSS para que a página volte a ser apresentada corre- 
tamente. Repita esse processo até considerar que tenha definido todos os breakpoints necessários. 


Mídias Flexíveis 


Para criarmos uma página que seja confortável para a leitura, devemos ajustar o posicionamento 
e a dimensão dos elementos conforme vimos anteriormente. As imagens, players de vídeo e áudio 
não são exceções. Entretanto, quando trabalhamos com certos tipos de mídias devemos ter alguns 
cuidados especiais. 


Suponha uma imagem de 320px de largura que gostaríamos de exibir em uma página de maneira 
que ela se adapte à largura da tela. Conseguiríamos fazer isso utilizando a propriedade width: 100%, 
por exemplo. Veja abaixo como ficaria essa página exibida em um smartphone e em um desktop. 


(«I») @ D 


OQ 


Smartphone Desktop 


Na imagem acima podemos perceber que a qualidade da imagem diminuiu ao esticá-la. Para 
evitar ou amenizar esse tipo de problema poderíamos criar diversas versões da imagem, uma para 
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cada breakpoint. Poderiamos também obter uma imagem original de tamanho maior, pois, em geral, 
diminuir uma imagem perde menos qualidade do que esticar. Ou ainda, dependendo da imagem, 
poderiamos utilizar uma versáo vetorial da mesma. Como podemos observar, existem diversas téc- 
nicas para resolver esse tipo de problema e, caso tenha interesse, procure por Icon Fonts, formato de 
imagem SVG e Compressive Images. Esses sáo termos muito utilizados por técnicas de otimizacáo 


de imagens na web. 


No caso dos players de vídeo e áudio recomendamos a leitura do artigo neste endereço: http: 
//alistapart.com/article/creating-intrinsic-ratios-for-video 


Le Exercícios Complementares 


o No projeto css, crie um arquivo chamado background-color.html. 


Ere a ad, 
wN- Oc WO 001 20020 — 


<!DOCTYPE html» 


«html langz"pt-br"» 


<head> 


«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - background-color</title> 
<link rel="stylesheet” type="text/css” href="background-color.css"> 


</head> 
<body> 


«div id="div1"></div> 
<div id="div2"></div> 
<div id="div3"></div> 


</body> 
</html> 


Código HTML 3.38: background-color.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar1.zip 


® No projeto css, crie um arquivo CSS chamado background-color.css. 


es CS cS C 
UU 4C n0— COW ANDO 0n = 


div { 
height: 100px; 
width: 400px; 
J 


#div1 { 
background-co 


} 


#div2 { 
background-co 


} 


#div3 { 
background-co 


} 


or: 


or: 


(Op 8 


red; 


#00ff00; 


rebicd, O, 255); 


Código CSS 3.60: background-color.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar2.zip 
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e No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/css/public html/background-color.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/css/public. html/background- color .html. 


o No projeto css, crie um arquivo chamado background-image.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - background-image</title> 

6 <link rel="stylesheet” type="text/css" href="background-image.css"> 
7 </head> 

8 <body> 

9 

10 </body> 

11 |</html> 


Código HTML 3.39: background-image.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar4.zip 


(5) No projeto css, crie um arquivo CSS chamado background-image.css. 


body { 
background-image: 
url("http://www.k19.com.br/figs/planeta.png"), 
url("http://www.k19.com.br/figs/fundo.jpg"); 


aA 0nP.y— 


Código CSS 3.61: background-image.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar5.zip 
Q No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/background-image.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/background-image.html. 


© No projeto css, crie um arquivo chamado background-repeat.html. 


1 «!DOCTYPE html» 

2 «html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - background-repeat</title> 

6 <link rel="stylesheet” type="text/css” hrefz"background-repeat.css"» 
7 </head> 

8 <body> 

9 


<div id="div1"></div> 
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10 <div id="div2"></dive 

11 <div id="div3"></div> 

12 <div id="div4"></div> 

13 </body> 

14 «/html» 


Cédigo HTML 3.40: background-repeat.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar7.zip 


Ó No projeto css, crie um arquivo CSS chamado background-repeat.css. 


1 div { 

2 height: 300px; 

3 width: 400px; 

4 border: 1px solid black; 

5 margin: 10px; 

6 |} 

7 

8 j#divl ( 

9 background-image: url("http://www.k19.com.br/figs/planeta-small.png"); 
10 |) 

11 

12 |#div2 ( 

13 background-image: url("http://www.k19.com.br/figs/planeta-small.png"); 
14 background-repeat: no-repeat; 

15 |} 

16 

17 j#div3 ( 

18 background-image: url("http://www.k19.com.br/figs/planeta-small.png"); 
19 background-repeat: repeat-x; 

20 |} 

21 

22 |#div4 { 

23 background-image: url("http://www.k19.com.br/figs/planeta-small.png"); 
24 background-repeat: repeat-y; 

25 |} 


Cédigo CSS 3.62: background-repeat.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar8.zip 


Q No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/background-repeat.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/background-repeat.html 


© No projeto css, crie um arquivo chamado background-attachment.html. 


1 «!DOCTYPE html» 

2 «html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>K19 - background-attachment</title> 

6 <link rel="stylesheet” type="text/css” href="background-attachment.css"> 
7 </head> 

8 <body> 

9 
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10 | </body> 
11 | </html> 


Código HTML 3.41: background-attachment.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar10.zip 


o No projeto css, crie um arquivo CSS chamado background-attachment.css. 


body { 
height: 2000px; 
background-image: url("http://www.k19.com.br/figs/fundo.jpg"); 


WN 


} 


Código CSS 3.63: background-attachment.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar11.zip 


(12) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/background-attachment.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/~<USUARIO>/css/public_html/background-attachment.html. 


Observe o comportamento da imagem de background quando você movimenta a barra de ro- 
lagem. 


(13) No projeto css, altere o arquivo CSS background-attachment.css. 


1 |body € 

2 height: 2000px; 

3 background-image: url("http://www.k19.com.br/figs/fundo. jpg”); 
4 background-attachment: fixed; 

5 |} 


Cédigo CSS 3.64: background-attachment.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar13.zip 


(14) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/background-attachment.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/~<USUARIO>/css/public_html/background-attachment.html. 


Observe o comportamento da imagem de background quando você movimenta a barra de ro- 
lagem. 


(15) No projeto css, crie um arquivo chamado background-position.html. 
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1 |«! DOCTYPE html» 
2 <html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - background-position</title> 
6 <link rel="stylesheet” type="text/css” hrefz"background-position.css"» 
7 </head> 
8 <body> 
9 
10 </body> 
11 |</html> 
Código HTML 3.42: background-position.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar15.zip 
O No projeto css, crie um arquivo CSS chamado background-position.css. 
1 |body € 
2 background-image: url("http://www.k19.com.br/figs/planeta-small.png"); 
3 background-repeat: no-repeat; 
4 background-position: center top; 
5 |} 
Cédigo CSS 3.65: background-position.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar16.zip 
(17) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/background-position.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/~<USUARIO>/css/public_html/background-position.html. 
(18) No projeto css, crie um arquivo chamado background-clip.html. 
1 |«! DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - background-clip</title> 
6 <link rel="stylesheet” type="text/css” hrefz"background-clip.css"» 
7 </head> 
8 <body> 
9 «div id="div1"></div> 
10 <div id="div2"></div> 
11 <div id="div3"></div> 
12 </body> 
13 |</html> 
Código HTML 3.43: background-clip.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar18.zip 
O No projeto css, crie um arquivo CSS chamado background-clip.css. 
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1 [dist 

2 width: 400px; 

3 height: 50px; 

4 margin: 10px; 

5 padding: 50px; 

6 border: 10px dotted black; 

7 background-color: yellow; 

8 |} 

9 

10 j#divi ( 

11 background-clip: border-box; 
12 |} 

13 

14 |#div2 ( 

15 background-clip: padding-box; 
16 |} 

17 

18 j#div3 ( 

19 background-clip: content -box; 
20 |} 


Código CSS 3.66: background-clip.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar19.zip 
(20) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/background-clip.html. 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/background-clip.html. 


o No projeto css, crie um arquivo chamado background-origin.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - background-origin</title> 

6 <link rel="stylesheet” type="text/css” hrefz"background-origin.css"» 
7 </head> 

8 <body> 

9 <div id="divl"></div> 

10 <div id="div2"></div> 

11 <div id="div3"></div> 

12 </body> 

13 |</html> 


Código HTML 3.44: background-origin.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar21.zip 


(22) No projeto css, crie um arquivo CSS chamado background-origin.css. 


1 div { 

2 width: 400px; 
3 height: 100px; 
4 margin: 10px; 
5 padding: 25px; 
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6 border: 10px dotted black; 

7 background-repeat: no-repeat; 

8 background-image: url("http://www.k19.com.br/figs/planeta-small.png"); 
9 B. 

10 

11 |#div1 ( 

12 background-origin: border-box; 

13 |} 

14 

15 s4div2 ( 

16 background-origin: padding-box; 

17 |) 

18 

19 s4div3 ( 

20 background-origin: content-box; 

21 |} 


Código CSS 3.67: background-origin.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar22.zip 


(23) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/background-origin.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/background-origin.html 


o No projeto css, crie um arquivo chamado background-size.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - background-size</title> 

6 <link rel="stylesheet” type="text/css” hrefz"background-size.css"» 
7 </head> 

8 <body> 

9 «div id="div1”></div> 

10 <div id="div2"></div> 

11 «div id="div3"></div> 

12 </body> 

13 |</html> 


Código HTML 3.45: background-size.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar24.zip 


(25) No projeto css, crie um arquivo CSS chamado background-size.css. 


div f 
width: 400px; 
height: 100px; 
margin: 10px; 
padding: 25px; 
border: 10px dotted black; 
background-repeat: no-repeat; 


COMAN DUO HPWDNY a 


EN 


background-image: url("http://www.k19.com.br/figs/planeta-small.png"); 
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11 |#div1 ( 

12 background-size: 50px auto; 
13 |} 

14 

15 |&div2 ( 

16 background-size: cover; 
17 |} 

18 

19 j#div3 ( 

20 background-size: contain; 
21 |} 


Código CSS 3.68: background-size.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar25.zip 
(26) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/background-size.html. 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/background-size.html. 


o No projeto css, crie um arquivo chamado color.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - color</title> 

6 <link rel="stylesheet” type="text/css” href="color.css"> 
7 </head> 

8 <body> 

9 <p id="p1">K19 Treinamentos</p> 

10 <p id="p2">K19 Treinamentos</p> 

11 <p id="p3">K19 Treinamentos</p> 

12 </body> 

13 «/html» 


Código HTML 3.46: color.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar27.zip 


o No projeto css, crie um arquivo CSS chamado color.css. 


1 4p1 { 

2 color: fed: 

3 |} 

4 

5 |#p2 ( 

6 color: #00ff00; 
2 b 

8 

9 /4p3 { 

10 color: rgb(O. 0, 25535 
1113 


Código CSS 3.69: color.css 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar28.zip 


[29] No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/css/public. html/color.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/~<USUARIO>/css/public_html/color.html. 


(30) No projeto css, crie um arquivo chamado text-align.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - text-align</title> 

6 <link rel="stylesheet” type="text/css” href="text-align.css"> 

7 </head> 

8 <body> 

9 <p id="p1"> 

10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

11 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
12 sit amet sodales quam massa sit amet risus. Fusce malesuada 

13 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
14 leo nunc, in ornare turpis aliquam quis. 

15 </p> 

16 <p id="p2"> 

17 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

18 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
19 sit amet sodales quam massa sit amet risus. Fusce malesuada 

20 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
21 leo nunc, in ornare turpis aliquam quis. 

22 </p> 

23 <p id="p3"> 

24 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

25 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
26 sit amet sodales quam massa sit amet risus. Fusce malesuada 

27 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
28 leo nunc, in ornare turpis aliquam quis. 

29 </p> 

30 <p id="p4"> 

31 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

32 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
33 sit amet sodales quam massa sit amet risus. Fusce malesuada 

34 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
35 leo nunc, in ornare turpis aliquam quis. 

36 </p> 

37 </body> 

38 |</html> 


Código HTML 3.47: text-align.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar30.zip 


o No projeto css, crie um arquivo CSS chamado text-align.css. 


p { 
border: 1px solid black; 
width: 400px; 


AUN- 


m KIS www.facebook.com/k1 9treinamentos 


261 


CSS 262 


text-align: left; 


à 


à; 


text-align: center; 


à 


à 


à 


text-align: rights 


sa 


à 


a 
tO O0 -4 O) Ui. (). I) — O (o ANDY 
m 


text-align: justify; 


N 
o 
m 


Código CSS 3.70: text-align.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar31.zip 
(32) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/text-align.html. 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/text-align.html. 


o No projeto css, crie um arquivo chamado text-decoration.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - text-decoration</title> 

6 <link rel="stylesheet” type="text/css” hrefz"text-decoration.css"» 
7 </head> 

8 <body> 

9 «p id="p1"> 

10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

11 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
12 sit amet sodales quam massa sit amet risus. Fusce malesuada 

13 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
14 leo nunc, in ornare turpis aliquam quis. 

15 </p> 

16 <p id="p2"> 

17 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

18 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
19 sit amet sodales quam massa sit amet risus. Fusce malesuada 

20 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
21 leo nunc, in ornare turpis aliquam quis. 

22 </p> 

23 <p id="p3"> 

24 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

25 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
26 sit amet sodales quam massa sit amet risus. Fusce malesuada 

27 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
28 leo nunc, in ornare turpis aliquam quis. 

29 </p> 

30 </body> 

31 |</html> 


Cédigo HTML 3.48: text-decoration.html 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar33.zip 


o No projeto css, crie um arquivo CSS chamado text-decoration.css. 


9 
width: 400px; 
B 


pl ( 
text-decoration: underline; 


} 


#p2 { 
text-decoration: overline; 


} 


#p3 { 
text-decoration: line-through; 


IY UTE ae, cat 
OPWN HF COO AN DANA FLWHNY = 


} 


Código CSS 3.71: text-decoration.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar34.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/css/public html/text-decoration.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //1localhost/-«USUARIO? /css/public. html/text-decoration.html. 


o No projeto css, crie um arquivo chamado text-transform.html. 


1 |<!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - text-transform</title> 

6 <link rel="stylesheet” type="text/css” hrefz"text-transform.css"» 
7 </head> 

8 <body> 

9 <p id="p1"> 

10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

11 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
12 sit amet sodales quam massa sit amet risus. Fusce malesuada 

13 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
14 leo nunc, in ornare turpis aliquam quis. 

15 </p> 

16 «p id="p2"> 

17 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

18 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
19 sit amet sodales quam massa sit amet risus. Fusce malesuada 

20 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
21 leo nunc, in ornare turpis aliquam quis. 

22 </p> 

23 <p id="p3"> 

24 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

25 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
26 sit amet sodales quam massa sit amet risus. Fusce malesuada 

27 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
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28 leo nunc, in ornare turpis aliquam quis. 
29 </p> 

30 </body> 

31 |«/html» 


Código HTML 3.49: text-transform.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar36.zip 


9 No projeto css, crie um arquivo CSS chamado text-transform.css. 


DEC 
width: 400px; 
} 


#pl { 
text-transform: capitalize; 


} 


#p2 { 
text-transform: uppercase; 


} 


#p3 { 
text-transform: lowercase; 


EE ae ee ee 
OFPWNH- CO AN DAO HPWHDNY => 


} 


Código CSS 3.72: text-transform.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar37.zip 


© No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/css/public html/text-transform. html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/css/public. html/text-transform.html. 


o No projeto css, crie um arquivo chamado text-indent.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - text-indent</title> 

6 <link rel="stylesheet” type="text/css” hrefz"text-indent.css"» 

7 </head> 

8 <body> 

9 «p id="p1"> 

10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

11 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
12 sit amet sodales quam massa sit amet risus. Fusce malesuada 

ife: eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
14 leo nunc, in ornare turpis aliquam quis. 

15 </p> 

16 <p id="p2"> 

17 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 

18 mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
19 sit amet sodales quam massa sit amet risus. Fusce malesuada 

20 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
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21 leo nunc, in ornare turpis aliquam quis. 
22 </p> 

23 </body> 

24 |</html> 


Código HTML 3.50: text-indent.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar39.zip 


O No projeto css, crie um arquivo CSS chamado text-indent.css. 


ipt 

2 width: 400px; 

3j 

4 

5 |#p1 { 

6 text-indent: 0px; 
7 |} 

8 

9 |#p2 ( 

10 text-indent: 30px; 
11 |} 


Cédigo CSS 3.73: text-indent.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar40.zip 


@ No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/css/public html/text-indent.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/css/public. html/text-indent.html. 


(42) No projeto css, crie um arquivo chamado letter-spacing.html. 


<!DOCTYPE html» 
<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - letter-spacing</title> 
<link rel="stylesheet” type="text/css” href="letter-spacing.css"> 
</head> 
<body> 
«p id="p1"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p> 
<p id="p2"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p> 
<p id="p3"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p> 
<p id="p4"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 


— S EE — — 
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20 </p> 
21 </body> 
22 |</html> 


Código HTML 3.51: letter-spacing.html 


m K | € www.facebook.com/k19treinamentos 265 


CSS 266 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar42.zip 


© No projeto css, crie um arquivo CSS chamado letter-spacing.css. 


#p1 { 
letter-spacing: 2px; 
B 


#p2 { 
letter-spacing: -2px; 


} 


#p3 ( 
letter-spacing: 4px; 
J 


#p4 { 
letter-spacing: 6px; 


LU a o MO DEN 
EUwUNAÃO LOCO OURWwNA 


} 


Código CSS 3.74: letter-spacing.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar43.zip 
© No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public html/letter-spacing.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/css/public. html/letter-spacing.html. 


(45) No projeto css, crie um arquivo chamado word-spacing.html. 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - word-spacing</title> 
<link rel="stylesheet” type="text/css” href="word-spacing.css"> 
</head> 
<body> 
«p id="p1"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p> 
<p id="p2"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p> 
<p id="p3"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p> 
<p id="p4"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 


A RMS e E 3 1 a 
«oO Oo 4001 32 UN — CHO ANDO 3» 00 N20 — 


20 </p> 
21 </body> 
22 |</html> 


Código HTML 3.52: word-spacing.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar45.zip 
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© No projeto css, crie um arquivo CSS chamado word-spacing.css. 
1 *4p1 | 
2 word-spacing: 10px; 
3 |} 
4 
5 |#p2 { 
6 word-spacing: -5px; 
7 |} 
8 
9 |#p3 { 
10 word-spacing: 30px; 
11 |} 
12 
13 |#p4 { 
14 word=spacing: 50px; 
15 |} 
Código CSS 3.75: word-spacing.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar46.zip 
Q No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/word-spacing.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/~<USUARIO>/css/public_html/word-spacing.html 
O No projeto css, crie um arquivo chamado word-wrap.html. 
1 [SIDOCTYRE htmi> 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - word-wrap</title> 
6 <link rel="stylesheet” type="text/css” hrefz"word-wrap.css"» 
7 </head> 
8 <body> 
9 «p id="p1"> 
10 Otorrinolaringologista. 
11 </p> 
12 <p> 
13 Otorrinolaringologista. 
14 </p> 
15 </body> 
16 «/html» 
Cédigo HTML 3.53: word-wrap.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar48.zip 
[49) No projeto css, crie um arquivo CSS chamado word-wrap.css. 
1 [BEN 
2 width: 100px; 
3 border: 1px solid black; 
4 |} 
5 
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6 spl { 


7 
8 


word-wrap: break-word; 


} 


Cédigo CSS 3.76: word-wrap.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar49.zip 


o No Windows, utilize o Chrome para acessar o endereço: 


http: //localhost/css/public. html/word-wrap.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/-«USUARIO? /css/public. html/word-wrap.html. 


o No projeto css, crie um arquivo chamado line-height.html. 


2-2 2222. 


à 


à 
(oO 0-410014» UN HK CHO ANDO 3» 00 n0 — 


à 


NNN NM NY 
WN Oo 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - line-height</title> 
<link rel="stylesheet” type="text/css” href="line-height.css"> 
</head> 
<body> 
«p id="p1"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusce malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 
</p> 
<p id="p2"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusce malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 
</p> 
</body> 
</html> 


Código HTML 3.54: line-height.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar51.zip 


o No projeto css, crie um arquivo CSS chamado line-height.css. 


Tip 4 

2 width: 400px; 

3 border: 1px solid black; 
ar | 

5 

6 |#p1 { 

7 line-height: 20px; 

8 |} 

9 

10 |#p2 { 

11 line-height: 40px; 

12 |} 
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Código CSS 3.77: line-height.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar52.zip 


o No Windows, utilize o Chrome para acessar o endereco: 


http://localhost/css/public html/line-height.html 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<USUARIO>/css/public_html/line-height. html. 


o No projeto css, crie um arquivo chamado white-space.html. 


content="text/html; charset=UTF -8"> 


<link rel="stylesheet” type="text/css” hrefz"white-space.css"» 


ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula 


dui nulla, cursus et lacinia eu, vulputate ac dolor. 


ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula 


dui nulla, cursus et lacinia eu, vulputate ac dolor. 


ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula 


dui nulla, cursus et lacinia eu, vulputate ac dolor. 


ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula 


dui nulla, cursus et lacinia eu, vulputate ac dolor. 


ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 <meta http-equiv="Content -Type” 
5 <title>K19 - white-space</title> 
6 

7 </head> 

8 <body> 

9 <p id="p1"> 

10 Lorem 

11 

12 bibendum arcu. 

13 

14 Sed 

15 

16 Quisque faucibus congue congue. 
17 </p> 

18 «p id="p2"> 

19 Lorem 

20 

21 bibendum arcu. 

22 

23 Sed 

24 

25 Quisque faucibus congue congue. 
26 </p> 

27 <p id="p3"> 

28 Lorem 

29 

30 bibendum arcu. 

31 

32 Sed 

38 

34 Quisque faucibus congue congue. 
35 </p> 

36 «p id="p4"> 

37 Lorem 

38 

39 bibendum arcu. 

40 

41 Sed 

42 

43 Quisque faucibus congue congue. 
44 </p> 

45 <p id="p5"> 

46 Lorem 

47 

48 bibendum arcu. 
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49 

50 Sed 

51 dui nulla, cursus et lacinia eu, vulputate ac dolor. 
52 Quisque faucibus congue congue. 

53 </p> 

54 </body> 

55 |</html> 


Cédigo HTML 3.55: white-space.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar54.zip 


o No projeto css, crie um arquivo CSS chamado white-space.css. 


pt 
width: 400px; 
border: 1px solid black; 


#p1 { 
white-space: nowrap; 


{ 


white-space: pre; 


à 


à 


à 


à 


#p3 { 
white-space: pre-line; 


à 


à 


à 


à 


#p4 ( 
white-space: pre-wrap; 


à 


à 
OANA NT C0 N2—0oO OVO PWD = 
+ 
ne} 

N 


N 
o 
uw 


Código CSS 3.78: white-space.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar55.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/css/public html/white-space.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/~<USUARIO>/css/public_html/white-space.html. 


(57) No projeto css, crie um arquivo chamado text-shadow.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - text-shadow</title> 

6 <link rel="stylesheet” type="text/css” hrefz"text-shadow.css"» 
7 </head> 

8 <body> 

9 <p id="p1"> 

10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

11 </p> 

12 <p id="p2"> 
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13 Lorem ipsum dolor sit amet, consectetur adipiscing detis 
14 </p> 

15 <p id="p3"> 

16 Lorem ipsum dolor sit amet, consectetur adipiscing ite 
17 </p> 

18 <p id="p4"> 

19 Lorem ipsum dolor sit amet, consectetur adipiscing arte. 
20 </p> 

21 <p id="p5"> 

22 Lorem ipsum dolor sit amet, consectetur adipiscing AE 
23 </p> 

24 </body> 

25 «/html» 


o No projeto css, crie um arquivo CSS chamado text-shadow.css. 


à d E iA. A mE ds cd 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar57.zip 


Código HTML 3.56: text-shadow.html 


o 


font-size: 


} 


8pl { 


text-shadow: 


} 


#p2 { 


text-shadow: 


} 


#p3 { 


text-shadow: 


} 


#p4 { 


text-shadow: 


} 


#p5 { 


text-shadow: 


} 


xx-large; 


3px 3px £ff0000; 


-3px -3px &ff0000; 


0 0 10px #ff0000; 


10px 10px 10px #ff0000; 


5px 5px 5px #ff0000, -5px -5px 5px #0000ff; 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar58.zip 


Código CSS 3.79: text-shadow.css 


o No Windows, utilize o Chrome para acessar o endereco: 


[60] No projeto css, crie um arquivo chamado font-family.html. 


1 


3 


http://localhost/css/public_html/text- shadow. html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/text- shadow.html. 


<!DOCTYPE html» 
2 |<html langz"pt-br"» 


<head> 
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«meta http-equiv-"Content-Type" 


<title>K19 - font-family</title> 
<link rel="stylesheet” 


dolor 


dolor 


dolor 


dolor 


dolor 


sit 


sit 


sit 


sit 


sit 


4 
5 

6 

7 </head> 

8 <body> 

9 <p id="p1"> 
10 Lorem ipsum 
11 </p> 

12 <p id="p2"> 
13 Lorem ipsum 
14 </p> 

15 <p id="p3"> 
16 Lorem ipsum 
17 </p> 

18 <p id="p4"> 
19 Lorem ipsum 
20 </p> 

21 <p id="p5"> 
22 Lorem ipsum 
23 </p> 

24 </body> 

25 |</html> 


type="text/css” 


amet , 


amet , 


amet , 


amet , 


amet , 


consectetur 


consectetur 


consectetur 


consectetur 


consectetur 


content="text/html ; 


hrefz"font-fami 


adipiscing 


adipiscing 


adipiscing 


adipiscing 


adipiscing 


charsetzUTF-8"» 


yncss x 


nano 


MES 


Ete 


alo 


DE 


Código HTML 3.57: font-family.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar60.zip 


Qo No projeto css, crie um arquivo CSS chamado font-family.css. 


d» X xA xd cA QE zh c 
«(oO 0 4001 3 C0 l2 — OO (o0 40 01 3» 00 20 — 


à. 


NNN h2 
C) N= Oo 


pt 
font-size: xx-large; 
J 
"pl ( 
font-family: "Arial"; 
y 
#p2 ( 
font-family: “Courier”: 
J 
#p3 { 
font-family: "Verdana"; 
} 
#p4 { 
font-family: “serif: 
j 
#p5 ( 
font-family: < cursive 


} 


Código CSS 3.80: font-family.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar61.zip 


Q No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/css/public html/font-family.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


272 


www.k19.com.br 29) KIS 


273 


CSS 


http: //localhost/~<USUARIO>/css/public_html/font- family. html. 


[63] No projeto css, crie um arquivo chamado font-size.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - font-size</title> 

6 <link rel="stylesheet” type="text/css” href="font-size.css"> 
7 </head> 

8 <body> 

9 <p id="p1"> 

10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
11 </p> 

12 <p id="p2"> 

13 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
14 </p> 

15 <p id="p3"> 

16 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
17 </p> 

18 <p id="p4"> 

19 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
20 </p> 

21 <p id="p5"> 

22 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
23 </p> 

24 </body> 

25 «/html» 


Cédigo HTML 3.58: font-size.html 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-css-complementar63.zip 


Q No projeto css, crie um arquivo CSS chamado font-size.css. 


1 |#p1 { 

2 font-size: x-small; 
3 5 

4 

5 |#p2 { 

6 font-size: x-large; 
7 Bj 

8 

9 |#p3 ( 

10 font-size: xx-large; 
11 3 

12 

13 |#p4 { 

14 font-size: 18px; 

15 |} 

16 

17 |#p5 { 

18 font-size: 30 px: 

19 |} 


Código CSS 3.81: font-size.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar64.zip 


(65) No Windows, utilize o Chrome para acessar o endereço: 
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http://localhost/css/public_html/font-size.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/font-size.html. 


[66] No projeto css, crie um arquivo chamado font-style.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - font-style</title> 

6 <link rel="stylesheet” type="text/css” href="font-style.css"> 
7 </head> 

8 <body> 

9 <p id="p1"> 

10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

11 </p> 

12 <p id="p2"> 

13 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

14 </p> 

15 <p id="p3"> 

16 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

17 </p> 

18 </body> 

19 |</html> 


Código HTML 3.59: font-style.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar66.zip 


@ No projeto css, crie um arquivo CSS chamado font-style.css. 


ipt 

2 font-size: xx-large; 
3 5 

4 

5 |#p1 { 

6 font-style: italic; 
7B 

8 

9 |#p2 ( 

10 font-style: oblique; 
11 |} 


Código CSS 3.82: font-style.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar67.zip 


© No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/css/public. html/font-style.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/-«USUARIO? /css/public. html/font-style.html. 
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[69] No projeto css, crie um arquivo chamado font-variant.html. 
1 ISUDOCTYPE html 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - font-variant</title> 
6 <link rel="stylesheet” type="text/css” href="font-variant.css"> 
7 </head> 
8 <body> 
9 <p id="p1"> 
10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
11 </p> 
12 <p id="p2"> 
13 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
14 </p> 
15 </body> 
16 |</html> 
Código HTML 3.60: font-variant.html 

Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar69.zip 
Q No projeto css, crie um arquivo CSS chamado font-variant.css. 
ipt 
2 font-size: xx-large; 
3 5 
4 
5 |#p1 { 
6 font-variant: small-caps; 
7 |} 

Código CSS 3.83: font-variant.css 

Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar70.zip 
@ No Windows, utilize o Chrome para acessar o endereco: 

http: //localhost/css/public html/font-variant.html 

No Ubuntu, utilize o Chrome para acessar o endereço: 

http: //localhost/~<USUARIO>/css/public_html/font-variant. html 
@ No projeto css, crie um arquivo chamado font-weight.html. 
1 SUDOCTYPE imi 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - font-weight</title> 
6 <link rel="stylesheet” type="text/css” hrefz"font-weight.css"» 
7 </head> 
8 <body> 
9 <p id="p1"> 
10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
11 </p> 
12 <p id="p2"> 
13 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
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14 </p> 

15 <p id="p3"> 

16 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
17 </p> 

18 </body> 

19 |</html> 


Código HTML 3.61: font-weight.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar72.zip 


[73] No projeto css, crie um arquivo CSS chamado font-weight.css. 


pt 
font=size: xx-large; 


} 


"pl ( 
font-weight: 400; 
y 


#p2 ( 
font-weight: 700; 
B 


#p3 { 
font-weight: bold; 


Eu uud uei. cmd md 
OU CGcPFN-—cocotu00-100U0U1 tn. 


} 


Cédigo CSS 3.84: font-weight.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar73.zip 


@ No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/css/public html/font-weight.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/font-weight.html. 


Q No projeto css, crie um arquivo chamado font-face.html. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - font-face</title> 
<link rel="stylesheet” type="text/css” href="font-face.css"> 
<link rel="stylesheet” type="text/css” 
href="http://fonts.googleapis.com/css?family=Norican” > 
<link rel="stylesheet” type="text/css” 
hrefz"http://fonts.googleapis.com/css?family-Bad*Script" > 
<link rel="stylesheet” type="text/css” 
href="http://fonts.googleapis.com/css?family=Ceviche+One”> 
</head> 
<body> 
<p id="p1"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p> 
<p id="p2"> 


=a 1 2 la là a 
cO -410 071i C0 N2—0O (00-4001 300 (n2 > 
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19 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
20 </p> 
21 <p id="p3"> 
22 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
23 </p> 
24 </body> 
25 «/html» 
Código HTML 3.62: font-face.html 

Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar75.zip 
@ No projeto css, crie um arquivo CSS chamado font-face.css. 
1T|p { 
2 font-size: xx-large; 
3 5 
4 
5 |#p1 { 
6 font-family: Nor Came 
7 |} 
8 
9 |#p2 { 
10 font-family; “Bad Scrupt : 
11 |} 
12 
13 |#p3 { 
14 font-family: "Ceviche One”; 
15 |} 

Código CSS 3.85: font-face.css 

Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar76.zip 
@ No Windows, utilize o Chrome para acessar o endereco: 

http: //localhost/css/public html/font-face.html 

No Ubuntu, utilize o Chrome para acessar o endereço: 

http: //localhost/~<USUARIO>/css/public_html/font-face.html. 
Q No projeto css, crie um arquivo chamado list-style-type.html. 
1stiDDETYPE html 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - list-style-type</title> 
6 <link rel="stylesheet” type="text/css” hrefz"list-style-type.css"» 
7 </head> 
8 <body> 
9 «ul id="ul1"> 
10 <li>K01 - Lógica de Programação</li> 
11 <li>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 
12 <li>K03 - Modelo Relacional e SQL</li> 
13 </ul> 
14 <ul id="ul2"> 
15 <li>K01 - Lógica de Programação</li> 
16 <li>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 
17 «li»K03 - Modelo Relacional e SQL</li> 
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18 
19 
20 
21 

22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 


</ul> 

«ul id="ul3"> 
«li»K01 - Lógica de Programação</li> 
«li»K02 - Desenvolvimento Web com HTML, 
«li»K03 - Modelo Relacional e SQL</li> 

«/ul» 

«ol idz"oli"» 
«li»K01 - Lógica de Programação</li> 
«li»K02 - Desenvolvimento Web com HTML, 
«li»K03 - Modelo Relacional e SQL</li> 

<ol> 

«ol id="012"> 
<li>K01 - Lógica de Programação</li> 
<li>K02 - Desenvolvimento Web com HTML, 
<li>K03 - Modelo Relacional e SQL</li> 

Jor 

«ol id="013"> 
«li»K01 - Lógica de Programação</li> 
«li»K02 - Desenvolvimento Web com HTML, 
«li»K03 - Modelo Relacional e SQL«/li» 

o 

«/body» 
«/html» 


ess 


CSS 


CSS 


ESS 


JavaScript«/li» 


JavaScript«/li» 


JavaScript</li> 


JavaScript</li> 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar78.zip 


Código HTML 3.63: list-style-type.html 


(79) No projeto css, crie um arquivo CSS chamado list-style-type.css. 


à, asd, N X a nma. ek ud 
OANA OTF UNS OO (Oo AN OU 4» C00 N20 — 


à 


NNN MN 
C) l2 CO 


#ull ( 


list-style-type: disc; 


} 


#ul2 { 


list-style-type: circle; 


} 


#ul3 { 


list-style-type: square; 


} 


Soll ( 


list-style-type: decimal; 


H 


4012 ( 


list-style-type: lower-latin; 


} 


#ol3 ( 


list-style-type: georgian; 


} 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar79.zip 


Código CSS 3.86: list-style-type.css 


© No Windows, utilize o Chrome para acessar o endereco: 


http://localhost/css/public_html/list-style-type. html 


No Ubuntu, utilize o Chrome para acessar o endereço: 
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http: //localhost/~<USUARIO>/css/public_html/list-style-type.html 


o No projeto css, crie um arquivo chamado list-style-image.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - list-style-image</title> 

6 <link rel="stylesheet” type="text/css" href="list-style-image.css"> 
7 </head> 

8 <body> 

9 <ul id="ul1"> 

10 «li»K01 - Lógica de Programação</li> 

11 «li»K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 
12 «li»K03 - Modelo Relacional e SQL«/li» 

13 «/ul» 

14 «ul id="ul2"> 

15 «li»K01 - Lógica de Programação</li> 

16 «li»K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 
17 «li»K03 - Modelo Relacional e SQL</li> 

18 ul 

19 «ul id="ul3"> 

20 «li»K01 - Lógica de Programação</li> 

21 «li»K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 
22 «li»K03 - Modelo Relacional e SQL</li> 

23 «/ul» 

24 </body> 

25 «/html» 


Cédigo HTML 3.64: list-style-image.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar81 .zip 


(82) No projeto css, crie um arquivo CSS chamado list-style-image.css. 


1 |#ull ( 

2 list-style-image: url("http://www.k19.com.br/figs/star.png"); 
3 |} 

4 

5 |#ul2 ( 

6 list-style-image: url("http://www.k19.com.br/figs/cake.png"); 
7 |} 

8 

9 |#ul3 ( 

10 list-style-image: url("http://www.k19.com.br/figs/flying heart.png"); 
11 1} 


Código CSS 3.87: list-style-image.css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar82.zip 


(83) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/list-style-image.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/list-style-image.html. 
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o No projeto css, crie um arquivo chamado list-style-position.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - list-style-position</title> 

6 <link rel="stylesheet” type="text/css” href="list-style-position.css"> 
7 </head> 

8 <body> 

9 «ul id="ul1"> 

10 «li»K01 - Lógica de Programação</li> 

11 «li»K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 

12 «li»K03 - Modelo Relacional e SQL</li> 

13 «/ul» 

14 «ul id="ul2"> 

15 «li»K01 - Lógica de Programação</li> 

16 «li»K02 - Desenvolvimento Web com HTML, CSS e JavaScript«/li» 

17 «li»K03 - Modelo Relacional e SQL</li> 

18 «/ul» 

19 </body> 

20 |</html> 


Código HTML 3.65: list-style-position.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar84.zip 


O No projeto css, crie um arquivo CSS chamado list-style-position.css. 


ii q 
border: 1px solid black; 
} 


dull { 
list-style-position: inside; 


NOP WDM 


} 


Cédigo CSS 3.88: list-style-position.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar85.zip 
© No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/css/public html/list-style-position.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/css/public html/list-style-position.html. 


9 No projeto css, crie um arquivo chamado border-style.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - border-style</title> 

6 <link rel="stylesheet” type="text/css” href="border-style.css"> 

7 </head> 

8 <body> 

9 


«div id="div1"></div> 
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id="div2"></div> 
id="div3"></div> 
id="div4"></div> 


281 

10 <div 
11 <div 
12 <div 
13 </body> 
14 «/html» 


Código HTML 3.66: border-style.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar87.zip 


No projeto css, crie um arquivo CSS chamado border-style.css. 


X md A uei. m, ed 


à 


à 
OANA 01 C0 l2— COW ANDO 00 n0 — 


à 


div { 
width: 400px; 


height: 200px; 


margin: 10px; 


border-width: 6px; 
3} 
#divl { 

border-style: dotted; 
B, 
#div2 { 

border-style: dashed; 
J 
#div3 { 

border-style: solid; 
J 
#div4 { 

border-style: double; 
y 


Código CSS 3.89: border-style.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar88.zip 


© No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/css/public html/border-style.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/~<USUARIO>/css/public_html/border-style.html 


[90] No projeto css, crie um arquivo chamado border-width.html. 


«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - border-width</title> 


<link rel="stylesheet” 


1 |«! DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 

4 

5 

6 

7 </head> 

8 <body> 

9 <div 

10 <div 

11 <div 

12 <div 


id="div1"></div> 
id="div2"></div> 
id="div3"></div> 
id="div4"></div> 


type="text/css” hrefz"border-width.css"» 
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13 </body> 
14 «/html» 


Cédigo HTML 3.67: border-width.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar90.zip 


(91) No projeto css, crie um arquivo CSS chamado border-width.css. 


div SE 
width: 400px; 
height: 200px; 
margin: 10px; 
border-style: solid; 
j 


#div1 { 
border-width: thin; 


à 


» 


3 


à, 


#div2 { 
border-width: thick; 


à 


cO -410 07i C0 N2—c0 too 4001 HPWH — 


à 


» 


à 


à 


#div3 { 
border-width: 2px; 


à 


" 


} 


N 
e 


#div4 { 
border-width: 10px; 


N N 
N a 


} 


Cédigo CSS 3.90: border-width.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar91.zip 


(92) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/border-width. html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/border-width. html 


[93] No projeto css, crie um arquivo chamado border-color.html. 


1|«! DOCTYPE html» 

2 «html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - border-color</title> 

6 <link rel="stylesheet” type="text/css” href="border-color.css"> 
7 </head> 

8 <body> 

9 <div id="divl"></div> 

10 <div id="div2"></div> 

11 <div id="div3"></div> 

12 </body> 

13 |</html> 


Código HTML 3.68: border-color.html 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar93.zip 


o No projeto css, crie um arquivo CSS chamado border-color.css. 


div { 
width: 400px; 
height: 200px; 
border-style: solid; 
J 


#div1 { 
border-color: red 


} 


#div2 { 
border-color: #00ff00; 
} 


#div3 { 
border-color: rgb(0,. 0, 255): 


md E ee, es mii em 
NOP Wn HCW AN DO HPWHNDY => 


} 


Cédigo CSS 3.91: border-color.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar94.zip 
[95] No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/css/public. html/border-color.html 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/-«USUARIO? /css/public. html/border-color.html 


[96] No projeto css, crie um arquivo chamado bordas-individuais.html. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - bordas-individuais</title> 
<link rel="stylesheet” type="text/css” href="bordas-individuais.css"> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


— CWO AN ODN FWHNY = 


= md 


Cédigo HTML 3.69: bordas-individuais.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar96.zip 


@ No projeto css, crie um arquivo CSS chamado bordas-individuais.css. 


1 iv = 

2 width: 400px; 
3 height: 200px; 
4 
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à 


à; 


cU EE ES 


i 


à 
OANA 071 4» UNS Q (o 0o - O) Ci 


à 


N 
e 


border-top-style: dashed; 
border-top-color: red; 
border-top-width: 2px; 


border-right-style: dotted; 
border-right-color: #00ff00; 
border-right-width: 8px; 


border-bottom-style: double; 
border-bottom-color: rgb(0, 0. 255): 
border-bottom-width: 14px; 


border-left-style: solid; 
border-left-color: black; 
border-left-width: 20px; 


Código CSS 3.92: bordas-individuais.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar97.zip 


(98) No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/css/public html/bordas-individuais.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/css/public html/bordas-individuais.html. 


o No projeto css, crie um arquivo chamado border-radius.html. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - border-radius</title> 
<link rel="stylesheet” type="text/css” hrefz"border-radius.css"» 
</head> 
<body> 
<div id="divl"></div> 


m xA d xd d 
PWN CHO AN AYN HRWHNY > 


<div id="div2"></div> 
<div id="div3"></div> 
<div id="div4"></div> 
</body> 
</html> 
Código HTML 3.70: border-radius.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar99.zip 


[100] No projeto css, crie um arquivo CSS chamado border-radius.css. 


{| chi um 

2 width: 400px; 

3 height: 100px; 

4 margin: 10px; 

5 border: 2px solid black; 

6 |} 

7 

8 j#divl ( 

9 border-radius: 20px; 
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à 


} 


à 


à 


#div2 { 
border-radius: 20px 60px; 


à 


à 


» 


à 


#div3 { 
border-radius: 20px 60px 100px; 


à 


à 
OANA oO FWNH— O 


à 


i 


à 


N 
e 


#div4 { 


N N 
N a 


J 


border-radius: 20px 60px 100px 140px; 


Código CSS 3.93: border-radius.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar100.zip 


O No Windows, utilize o Chrome para 


acessar O endereço: 


http://localhost/css/public_html/border-radius. html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/border-radius.html. 


c No projeto css, crie um arquivo chamado border-collapse.html. 


content="text/html; 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content -Type” 
5 <title>K19 - border -collapse</title> 
6 <link rel="stylesheet” type="text/css” 
7 </head> 

8 <body> 

9 <table id="tabela1”> 

10 <tr> 

11 <td>K19</td> 

12 <td>K19</td> 

13 </tr> 

14 <tr> 

15 <td>K19</td> 

16 <td>K19</td> 

17 Sat 

18 «/table» 

19 <table id="tabela2"> 

20 <tr> 

21 <td>K19</td> 

22 <td>K19</td> 

23 SIT 

24 SP 

25 <td>K19</td> 

26 <td>K19</td> 

27 </tr> 

28 </table> 

29 </body> 

30 |</html> 


hrefz"border- 


charset=UTF -8"> 


collapse.css”> 


Código HTML 3.71: border-collapse.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar102.zip 
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103) No projeto css, crie um arquivo CSS chamado border-collapse.css. 


1 table { 

2 border: 2px solid black; 
3 margin: 10px; 

4 |} 

5 

6 Itd { 

7 border: 2px solid black; 
8 |} 

9 

10 |#tabelal { 

11 border-collapse: collapse; 
12 |} 


Código CSS 3.94: border-collapse.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar103.zip 


Q No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public html/border-collapse.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/border-collapse.html. 


[105] No projeto css, crie um arquivo chamado border-spacing.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - border-spacing</title> 
6 <link rel="stylesheet” type="text/css” href="border-spacing.css"> 
7 </head> 

8 <body> 

9 «table id="tabela1"> 

10 <tr> 

11 <td>K19</td> 

12 <td>K19</td> 

13 S EUR 

14 Sb 

15 «td»K19«/td» 

16 <td>K19</td> 

17 SE 

18 </table> 

19 <table id="tabela2”> 

20 SUPS 

21 <td>K19</td> 

22 <td>K19</td> 

23 SE 

24 Sire 

25 <td>K19</td> 

26 <td>K19</td> 

27 S EUR 

28 «/table» 

29 </body> 

30 |</html> 


Código HTML 3.72: border-spacing.html 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar105.zip 
[106) No projeto css, crie um arquivo CSS chamado border-spacing.css. 
1 |table { 
2 border: 2px solid black; 
3 margin: 10px; 
4 |} 
5 
6 ltd { 
7 border: 2px solid black; 
8 |} 
9 
10 |#tabelal { 
11 border-spacing: 10px 5px; 
12 |} 
Cédigo CSS 3.95: border-spacing.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar106.zip 
(107 No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public html/border-spacing.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/css/public html/border-spacing.html. 
[108] No projeto css, crie um arquivo chamado outline-style.html. 
1 [SEDOCTYPE html 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - outline-style</title> 
6 <link rel="stylesheet” type="text/css” href="outline-style.css"> 
7 </head> 
8 <body> 
9 «div id="div1"></div> 
10 «div id="div2"></div> 
11 <div id="div3"></div> 
12 </body> 
13 |</html> 
Código HTML 3.73: outline-style.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar108.zip 
[109 No projeto css, crie um arquivo CSS chamado outline-style.css. 
Tdi 
2 width: 400px; 
3 height: 100px; 
4 margin: 10px; 
5 |} 
6 
7 |#divi { 
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® No Windows, utilize o Chrome para acessar o endereco: 


@ No projeto css, crie um arquivo chamado outline-color.html. 


co 4001» 06 n0 


wo 


@ No projeto css, crie um arquivo CSS chamado outline-color.css. 


outline-style: dashed; 
B, 
#div2 { 

outline-style: dotted; 
J 
#div3 { 

outline-style: solid; 
J 


Código CSS 3.96: outline-style.css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar109.zip 


http://localhost/css/public_html/outline-style.html 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/-«USUARIO? /css/public. html/outline-style.html. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” 
<title>K19 - outline-color</title> 
<link rel="stylesheet” 
</head> 
<body> 
<div id="divl"></div> 
<div id="div2"></div> 
<div id="div3"></div> 
</body> 
</html> 


content="text/html; charset=UTF -8"> 


type="text/css” hrefz"outline-color.css"» 


Código HTML 3.74: outline-color.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar111.zip 


1 [elie E 

2 width: 400px; 

3 height: 100px; 

4 margin: 10px; 

5 outline-style: solid; 

6 |} 

7 

8 |#div1 { 

9 outline-color: red; 

10 |} 

11 

12 |#div2 { 

13 outline-color: #00ff00; 
14 |} 

15 

16 |/#div3 { 

288 www.k19.com.br IIS 


289 


CSS 


17 outline color: rebidOh on 255); 
18 |} 


Código CSS 3.97: outline-color.css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar112.zip 
® No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/outline-color.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/outline-color.html. 


o No projeto css, crie um arquivo chamado outline-width.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - outline-width</title> 

6 <link rel="stylesheet” type="text/css” hrefz"outline-width.css"» 
7 </head> 

8 <body> 

9 <div id="divl"></div> 

10 <div id="div2"></div> 

11 <div id="div3"></div> 

12 </body> 

13 |</html> 


Código HTML 3.75: outline-width.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar114.zip 


& No projeto css, crie um arquivo CSS chamado outline-width.css. 


1 div { 

2 width: 400px; 

3 height: 100px; 

4 margin: 20px; 

5 outline-style: solid; 
6 |} 

7 

8 |gdivl ( 

9 outline-width: thin; 
10 |} 

11 

12 s4div2 ( 

ia outline-width: thick; 
14 |} 

15 

16 |#div3 ( 

17 outline-width: 2px; 
18 |) 


Código CSS 3.98: outline-width.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar115.zip 
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c No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/css/public html/outline-width.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/outline-width.html. 


@ No projeto css, crie um arquivo chamado outline-offset.html. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - outline-offset</title> 

6 <link rel="stylesheet” type="text/css” href="outline-offset.css"> 
7 </head> 

8 <body> 

9 <div id="divl"></div> 

10 <div id="div2"></div> 

11 <div id="div3"></div> 

12 </body> 

13 |</html> 


Código HTML 3.76: outline-offset.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar117.zip 


c No projeto css, crie um arquivo CSS chamado outline-offset.css. 


diy 
width: 400px; 
height: 50px; 
margin: 50px; 
outline: 5px solid red; 
border: 5px solid black; 


m d dnx ux. xa 
OFWNH- OH AN ODN 0n. 


B 
#divl { 

outline-offset: 20px; 
J 
#div2 { 

outline-offset: -20px; 
} 


Código CSS 3.99: outline-offset.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar118.zip 


[119 No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public html/outline-offset.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/css/public html/outline-offset.html. 
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© No projeto css, crie um arquivo chamado box-shadow.html. 


1 «!DOCTYPE html» 

2 |<html lang="pt-br”> 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - box-shadow</title> 

6 <link rel="stylesheet” type="text/css” href="box-shadow.css"> 
7 </head> 

8 <body> 

9 <div id="divl"></div> 

10 <div id="div2"></div> 

11 <div id="div3"></div> 

12 <div id="div4"></div> 

13 </body> 

14 «/html» 


Cédigo HTML 3.77: box-shadow.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar120.zip 


o No projeto css, crie um arquivo CSS chamado box-shadow.css. 


1 div { 

2 width: 200px; 

3 height: 100px; 

4 border: 4px solid black; 

5 margin: 50px; 

6 |} 

7 

8 j#divl ( 

9 box-shadow : 10px 5px gray; 

10 |) 

11 

12 s4div2 ( 

13 box-shadow : 10px 5px 5px gray; 
14 |} 

15 

16 |#div3 ( 

17 box-shadow : inset 10px 10px gray; 
18 |) 

19 

20 |#div4 ( 

21 box-shadow : inset 10px 10px 5px gray; 
22 |) 


Código CSS 3.100: box-shadow.css 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar121.zip 
© No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/css/public. html/box-shadow.html. 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /css/public. html/box-shadow.html. 


o No projeto css, crie um arquivo chamado margens-externas.html. 
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1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - margens-externas</title> 

6 <link rel="stylesheet” type="text/css” href="margens-externas.css"> 
7 </head> 

8 <body> 

9 <div id="divl"></div> 

10 <div id="div2"></div> 

11 <div id="div3"></div> 

12 <div id="div4"></div> 

13 </body> 

14 «/html» 


Cédigo HTML 3.78: margens-externas.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar123.zip 


124) No projeto css, crie um arquivo CSS chamado margens-externas.css. 


1|div € 

2 display: inline-block; 
3 border: 1px solid black; 
4 width: 100px; 

5 height: 100px; 

6 |} 

7 

8 |gdivl { 

9 margin-top: 50px; 

10 margin-right: 50px; 
13 

12 

13 |#div2 ( 

14 margin-bottom: 50px; 
15 |} 

16 

17 j#div3 ( 

18 Margin-left: 50px; 
19 |} 

20 

21 |#div4 { 

22 Margin-left: 50px; 
23 margin-bottom: 50px; 
24 |} 


Cédigo CSS 3.101: margens-externas.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar124.zip 


© No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public_html/margens-externas.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/margens-externas.html. 


e No projeto css, crie um arquivo chamado margens-internas.html. 


1[«! DOCTYPE html» | 
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2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - margens-internas</title> 

6 <link rel="stylesheet” type="text/css" href="margens-internas.css"> 
7 </head> 

8 <body> 

9 <div id="divl"></div> 

10 <div id="div2"></div> 

11 <div id="div3"></div> 

12 <div id="div4"></div> 

13 </body> 

14 «/html» 


Código HTML 3.79: margens-internas.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar126.zip 


127) No projeto css, crie um arquivo CSS chamado margens-internas.css. 


IM^ 

2 display: inline-block; 

3 border: 2px solid black; 
4 width: 100px; 

5 height: 100px; 

6 background-color: yellow; 
7 background-clip: content-box; 
8 |} 

9 

10 j#divi ( 

11 padding-top: 50px; 

12 padding-right: 50px; 

13 |} 

14 

15 j#div2 ( 

16 padding-bottom: 50px; 

17 |} 

18 

19 j#div3 ( 

20 padding-left: 50px; 

21 |} 

22 

23 |#div4 { 

24 padding-left: 50px; 

25 padding-bottom: 50px; 

26 |} 


Cédigo CSS 3.102: margens-internas.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar127.zip 


[129 No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/css/public html/margens-internas.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/css/public_html/margens-internas.html. 


o No projeto css, crie um arquivo chamado conteudo-dimensao.html. 
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<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - conteudo-dimensao</title> 
<link rel="stylesheet” type="text/css” hrefz"conteudo-dimensao.css"» 
</head> 
<body> 
<p id="p1"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusce malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 
</p> 
<p id="p2"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusce malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 
</p> 
<p id="p3"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor sollicitudin, orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusce malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 
</p> 
</body> 
</html> 


Código HTML 3.80: conteudo-dimensao.html 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-css- complementar 129.zip 


© No projeto css, crie um arquivo CSS chamado conteudo-dimensao.css. 


ES lll 
WN Oc (00-1001 FWN = 


pt 
border: 1px solid black; 
max-height: 200px; 
max-width: 400px; 
y 
"pl ( 
width: 200px; 
B 
#p2 { 
height: 130px; 
} 


Cédigo CSS 3.103: conteudo-dimensao.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-css-complementar130.zip 


o No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/css/public_html/conteudo-dimensao. html 


No Ubuntu, utilize o Chrome para acessar o endereco: 
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http: //localhost/~<USUARIO>/css/public_html/conteudo-dimensao. html. 


Resumo do Capitulo 


p> A linguagem CSS é utilizada para formatar visualmente as páginas web. 
2d Podemos considerar cada elemento HTML como um box. 
[b> A estrutura dos boxes é definida pelo Box Model. 


p De acordo com o Box Model, cada box possui conteüdo, margens internas, bordas e margens 
externas. 


> Por padráo, os boxes dos block-level elements ocupam todo o espaco horizontal do elemento 
pai e provocam quebras de linha. 


> Por padrão, os boxes dos inline-level elements ocupam apenas o espaço necessário e não 
provocam quebras de linha. 


[= A formatacao dos elementos HTML é definida através das regras CSS 

> Uma regra CSS é composta por seletor e corpo. No corpo, sáo definidas as propriedades CSS. 
> Os seletores definem quais elementos HTML serão afetados pelas regras CSS. 

p As propriedades CSS definem as características visuais dos elementos HTML. 


p As regras CSS podem ser aplicadas aos documentos HTML de três formas diferentes: inline 
style, internal style sheet e external style sheet. 


[a Os comentários CSS são definidos com os marcadores /* e */. 


p» Na linguagem CSS, toda cor está associada a um código numérico expresso em hexadecimal. 
Algumas cores possuem nome. 
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p Podemos escolher uma cor através do código dela ou através das funções rgb(), rgba(), hsl() e 
hsla(). As cores que possuem nome podem ser escolhidas através do seu nome. 


> As unidades absolutas da linguagem CSS são: cm, mm, in, pt, pc e px. 
p As unidades relativas da linguagem CSS sáo: em, ex, ch, rem, vw, vh, vmin e vmax. 


> As principais propriedades de background são: background-color, background-image, background- 
repeat, background-attachment, background-position, background-clip, background-origin, background- 
size e background. 


p As principais propriedades de texto sao: color, text-align, text-decoration, text-transform, 
text-indent, letter-spacing, word-spacing, word-wrap, line-height, white-space e text-shadown. 


pp» As principais propriedades de fonte sao: font-family, font-size, font-style, font-variant, font- 
weight, font e @font-face. 


E» As principais propriedades de lista sáo: list-style-type, list-style-image, list-style-position e 
list-style. 


b> As principais propriedades de borda são: border-style, border-width, border-color, border, 
border-left-*, border-top-*, border-right-*, border-bottom-*, border-radius, border-*-*-radius, border- 
collapse e border-spacing. 


> As principais propriedades de outline sao: outline-style, outline-color, outline-width, outline- 
offset e outline. 


> A principal propriedade de sombra é box-shadow. 
p> As principais propriedades de margens são: margin-*, margin, padding-* e padding. 


E> As principais propriedades de altura e largura são: height, width, min-height, max-height, 
min-width e max-width. 


E> A propriedade display define a forma de exibição dos boxes. 


27d A propriedade display define a forma de exibição dos boxes. 
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E> A propriedade visibility define a visibilidade dos boxes. 

E> Podemos controlar a opacidade dos boxes com a propriedade opacity. 

b> Os quatro tipos de posicionamento do CSS são: static, relative, fixed e absolute. 

p> As principais propriedades de posicionamento são: position, float, clear e z-index. 

> As principais propriedades de overflow e clips sao: overflow, overflow-x, overflow-y e clip. 
> As principais funções de transformação sao: translate(), scale(), rotate() e skew(). 


p As principais propriedades de transição são: transition-duration, transition-delay, transition- 
timing-function e transition-property. 


> As principais propriedades de animação são: animation-timing-function, animation-delay, 
animation-iteration-count, animation-direction e animation-play-state. 


p> Podemos dividir os seletores do CSS em básicos, seletores de atributo, pseudo-classes e pseudo- 
elementos. 


p> Quando ocorre conflito entre duas ou mais regras CSS, devemos calcular a prioridade dos 
seletores dessas regras para saber qual delas será aplicada. 


p- Com as media queries podemos definir formatações específicas para os diversos tipos de dis- 
positivos que desejamos suportar. 


> A técnica sprites melhora o tempo de carregamento das páginas web. 


© Prova 


Considere a formatação padrão dos navegadores. O que podemos dizer sobre um block-level 
element? 


a) Ocupa metade do espaco horizontal e nào provoca quebras de linha. 


b) Ocupa horizontalmente somente o espaço necessário para o seu conteúdo e não provocam 
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quebras de linha. 
c) Ocupa todo o espaco vertical e provoca quebras de linha. 


d) Ocupa horizontalmente somente o espaço necessário para o seu conteúdo e provocam que- 
bras de linha. 


e) Ocupa todo o espaço horizontal e provoca quebras de linha. 


Considere a formatação padrão dos navegadores. O que podemos dizer sobre um inline-level 
element? 


a) Ocupa metade do espaço horizontal e não provoca quebras de linha. 


b) Ocupa horizontalmente somente o espaço necessário para o seu conteúdo e não provocam 
quebras de linha. 


c) Ocupa todo o espaço vertical e provoca quebras de linha. 


d) Ocupa horizontalmente somente o espaço necessário para o seu conteúdo e provocam que- 
bras de linha. 


e) Ocupa todo o espaço horizontal e provoca quebras de linha. 


Como podemos aplicar um código CSS a um documento HTML? 


a) Através do elemento link da seguinte forma: 


1 «link rel="stylesheet” type="text/css” src="estilo.css"></link>. 


b) Através do elemento css da seguinte forma: 


1 |<css>p (font-size: 12px}</css> 


c) Através do elemento style da seguinte forma: 


1 |<style rel="stylesheet” type="text/css” src="estilo.css"></style> 


d) Através do elemento link da seguinte forma: 


1 «link rel="stylesheet” type="text/css” href="estilo.css"></link> 


e) Através do elemento stylesheet da seguinte forma: 


1 |<stylesheet src="estilo.css"></stylesheet> 


ES Qual das alternativas é um valor inválido de cor CSS? 
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a) red 

b) #00ff00 

c) preto 

d) rgba(0, 100, 30, 0.1) 


e) hsl(100, 20%, 10%) 


Qual das alternativas é uma unidade inválida de medida CSS? 


a) px 

b) em 
c) rem 
d) qm 


e) pc 


Dn Qual das propriedades abaixo pode ser utilizada para definir uma imagem de fundo de um 


elemento? 


a) background-attachment 
b) background 

c) bg-color 

d) background-size 


e) bg-image 


Para definirmos a cor da fonte de um texto, qual propriedade CSS devemos utilizar? 


a) color 

b) font-color 

c) text-color 

d) foreground-color 


e) colour 


E Considere o seguinte código HTML: 
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1 |<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

2 

3 |Cras vehicula bibendum arcu. 

4 |Sed dui nulla, cursus et lacinia eu, 

5 [vulputate ac dolor. 

6 |Quisque faucibus congue congue.</div> 


O que acontecerá quando esse código for renderizado em um navegador? 


a) 


b) 


c) 


d) 


e) 


Todas as sequéncias de espacos seráo tratadas como um ünico espaco e as quebras de linha 
seráo respeitadas. 


Todas as sequências de espaços serão respeitadas e as quebras de linha serão ignoradas. 


Todas as sequências de espaços serão respeitadas e as quebras de linha serão tratadas como 
um espaço. 


Todas as sequências de espaços serão tratadas como um único espaço e as quebras de linha 
serão ignoradas. 


Todas as sequências de espaços serão tratadas como um único espaço e as quebras de linha 
serão tratadas como um espaço. 


H Para alterar o comportamento padrão com relação ao tratamento dos espaços e quebras de linha, 
devemos utilizar qual propriedade CSS? 


a) 
b) 
c) 
d) 


e) 


white-space 
word-spacing 
word-wrap 
line-height 


white-spacing 


Podemos alterar a fonte de um texto através da propriedade CSS font-family. Quais valores 
podem ser atribuídos a essa propriedade? 


a) 
b) 


c) 


O nome de uma fonte. 
O nome de um grupo de fonte classificado pela espessura das fontes. 


O nome de uma familia de fonte. 


d) O nome de uma fonte ou o nome de uma familia de fonte. 


e) O nome de um grupo de fonte classificado pelo tamanho das fontes. 
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Considere um elemento com as seguintes propriedades CSS: 


RWN 


width: 100px; 

border: 10px solid black; 
margin: 10px; 

padding: 10px; 


Ao ser renderizado em um navegador, o elemento tera: 


a) 120px de largura. 
b) 120px de altura. 
c) 130px de largura. 
d) 140px de altura. 


e) 160px de largura. 


Qual a diferença entre uma “borda” produzida pela propriedade outline e outra produzida pela 
propriedade border? 


a) Nenhuma diferença. 

b) A borda produzida pela propriedade border é mais grossa. 

c) A borda produzida pela propriedade outline não pode ter sua cor alterada. 

d) A borda produzida pela propriedade outline não afeta as dimensões do box do elemento. 


e) A borda produzida pela propriedade border não funciona em todos os navegadores. 


Podemos utilizar a propriedade display com valor none ou a propriedade visibility com valor 
hidden para fazer com que um elemento não apareça em uma página HTML. Qual a diferença entre 
as duas abordagens? 


a) Nenhuma diferença. 

b) O espaço do box de um elemento com propriedade display igual a none permanece inalterado. 
c) O espaço do box de um elemento com propriedade visibility igual a hidden deixa de existir. 
d) O espaço do box de um elemento com propriedade display igual a none deixa de existir. 


e) Seo valor none for atribuído a propriedade display, ela não poderá mudar mais de valor. 


Considere um elemento com as seguintes propriedades CSS: 
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1 |position: absolute; 
2 top: Opx; 
3 eft: Upx: 


O que podemos dizer sobre esse elemento? 


a) 
b) 
c) 


d) 


e) 


Será posicionado a 0px do topo e Opx da esquerda da página. 
Será posicionado a Opx do topo e Opx da esquerda do elemento pai. 
Será posicionado a 0px do topo e 0px da esquerda do primeiro elemento ancestral. 


Será posicionado a 0px do topo e 0px da esquerda do primeiro elemento ancestral que tenha a 
propriedade position diferente de static. 


Será posicionado a Opx do topo e Opx da esquerda do primeiro elemento ancestral que tenha 
a propriedade position diferente de static. Caso nenhum ancestral se encaixe nessa condicáo, 
ele será posicionado a Opx do topo e Opx da esquerda da página. 


Considere o seguinte código: 


1 <div style="width: 50px; height: 50px; font-size: 16px; 
2 overflow: hidden; border: 1px solid red"» 
3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget arcu neque. 
4 Cras at varius libero, vitae varius mauris. Nullam posuere eget nisi at 
5 posuere. Cras eu laoreet ipsum. 
6 |</div> 
O que podemos dizer sobre o contetido do elemento div? 
a) O trecho do contetido que ultrapassar na vertical e na horizontal os limites do elemento div 
será exibido. 
b) O trecho do contetido que ultrapassar na vertical os limites do elemento div será exibido. 
c) O trecho do contetido que ultrapassar na vertical e na horizontal os limites do elemento div 
nao será exibido. 
d) O trecho do conteúdo que ultrapassar na horizontal os limites do elemento div será exibido. 


Considere o seguinte código: 


1 «div id-z"div1" class="class1"> 

2 «p id="p1">Lorem ipsum dolor sit amet.</p> 

3 <p id="p2” class="class1">Lorem ipsum dolor sit amet.</p> 

4 «div id="div2"> 

5 Lorem ipsum dolor sit amet. 

6 <p id="p3” class="class1">Lorem ipsum dolor sit amet.</p> 

7 «div id="div3"> 

8 Lorem ipsum dolor sit amet. 

9 <p id="p4” class="class1">Lorem ipsum dolor sit amet.</p> 
10 </div> 
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11 </div> 

12 <div id="div4"> 

13 Lorem ipsum dolor sit amet. 

14 <p id="p5" class="class1">Lorem ipsum dolor sit amet.</p> 
15 <div id="div5"> 

16 Lorem ipsum dolor sit amet. 

17 <p id="p6” class="class1">Lorem ipsum dolor sit amet.</p> 
18 </div> 

19 </div> 

20 <p id="p7” class="class1”>Lorem ipsum dolor sit amet.</p> 

21 «a href="#" class="class1">Lorem ipsum dolor sit amet.</a> 

22 «div id-"div6"»Lorem ipsum dolor sit amet.</div> 

23 |</div> 


Considere também que o seguinte código CSS foi aplicado ao documento: 


1 |#divl > p + div p.classt t 
2 color: red; 


3 |} 


Quem ficará com texto vermelho? 


a) Apenas o elemento com atributo id igual a p5. 

b) Os elementos com atributo id igual a p5 e p6. 

c) Os elementos com atributo id igual a p2, p5 e p7. 
d) Apenas o elemento com atributo id igual a p3. 


e) Os elementos com atributo id igual a p3 e p4. 


Considere o seguinte código: 


=i 


@media all and (width: 480px), (orientation: portrait) { 


3 |} 


O que podemos dizer sobre as regras CSS definidas dentro da media query acima? 


a) Serão aplicadas quando o viewport tiver 480px e a altura do viewport for maior que a sua lar- 


gura. 


b) Serão aplicadas apenas quando a largura do viewport for maior que a sua altura. 


c) Serão aplicadas apenas quando o viewport tiver 480px de largura. 


d) Serão aplicadas quando o viewport tiver 480px ou a altura do viewport for maior que a sua 


largura. 


e) Serão aplicadas apenas quando o viewport tiver 480px de altura. div. 


13 


17 


Minha Pontuacáo Pontuacáo Mínima: Pontuação Máxima: 
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CAPITULO 


Nos capitulos anteriores, vimos que as linguagens HTML e a CSS sao fundamentais para a cria- 
ção de páginas web. O foco do HTML é o conteúdo enquanto o foco do CSS é a formatação dessas 
páginas. 


As linguagens HTML e CSS não são linguagens de programação. Para resolver determinados 
problemas, é necessário utilizar uma linguagem de programação. Por isso, veremos nesse capítulo, a 
linguagem de programação JavaScript. 


Com a linguagem JavaScript podemos construir páginas extremamente dinâmicas e interativas. 
O foco do JavaScript é implementar o comportamento ou a inteligência das páginas web. 


‘© Aplicando JavaScript ao HTML 


Ha duas formas de associar código JavaScript e documentos HTML. 


JavaScript interno 


O código JavaScript pode ser definido dentro de um documento HTML no corpo do elemento 
script. 


1 |<script> 
2 alert("K19"); 
3 |</script> 


Nessa abordagem, o código JavaScript fica “amarrado” a um único documento HTML. 


JavaScript externo 


O código JavaScript pode ser definido em arquivos separados e depois associados aos documen- 
tos HTML através do elemento script. 


1 jalert("KT9"5: 


Código Javascript 4.1: script.js 


19 Ssenipit sne=“senipi gs ></script> 


Nessa outra abordagem, podemos reutilizar o mesmo código JavaScript em vários documentos 
HTML. 


"9 Carregamento 
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Como vimos, o elemento script permite associar código JavaScript aos documentos HTML. Esse 
elemento pode ser adicionado dentro do corpo dos elementos head e body. A localização do ele- 
mento script afeta o momento no qual o código JavaScript será carregado pelos navegadores. 


No exemplo a seguir, o elemento script foi colocado dentro do corpo do head. Dessa forma, o 
código JavaScript será carregado antes do body ser processado. Consequentemente, a página só será 
exibida depois do carregamento do JavaScript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Desenvolvimento Web</title> 
6 | <script Gres Seria aS </ Seles 
7 </head> 

8 <body> 

9 Me 

10 </body> 

11 |</html> 


No próximo exemplo, o elemento script foi colocado no final do body. Consequentemente, o 
JavaScript só será carregado depois de todos os outros elementos do body. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Desenvolvimento Web</title> 
6 </head> 

7 <body> 

8 acm 

9 | Sisienilpitsssiczuschiipigssscilpii- 
10 </body> 

11 |</html> 


Normalmente, a segunda abordagem é mais recomendada pois as páginas web sáo exibidas mais 
rapidamente aos usuários. Contudo, eventualmente, o código JavaScript deve ser utilizado antes do 
processamento dos elementos do body. Nesses casos, é necessário utilizar a primeira abordagem. 


‘© Chrome DevTools 


Os navegadores oferecem alguns recursos para testar ou depurar código JavaScript. Nas imagens 
abaixo, mostramos a utilizacáo do painel Console do Chrome DevTools. 
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eoo (about:blank 


SU Apps 48 como reservar diac ©% Guia da Semana [EB Legendas - baixe 'c [JJ HTMLS Video — Ed Comment Moderatic 


€ > QC [about:blank —— ELLA ‘= 


Q Elements Network Sources Timeline Profiles Resources 
© Ww <topframe>v 
> 


© Ww <topframe>v 


> console. log('K19 Treinamentos') 


© Ww <topframe>v 


> console. log('K19 Treinamentos') 
K19 Treinamentos 

€ undefined 

> 
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© Ww <topframe>v 


> console. log('K19 Treinamentos') 
K19 Treinamentos 
undefined 
> document.body.innerHTML = '«p»K19 Treinamentos</p>' 


© Ww <topframe>v 


> console. log('K19 Treinamentos') 
K19 Treinamentos 
undefined 

> document. body. innerHTML = '«p»K19 Treinamentos</p>' 
“<p>K19 Treinamentos</p>" 

> 


C^ Exercícios de Fixacáo 


e Abra o Netbeans e crie um projeto chamado javascript. 


Importante 
No Windows, utilizando o IIS (Internet Information Services) como Web Server, vocé 


deve salvar o projeto javascript em C:\inetpub\wwwroot. Lembre-se que é necessá- 
rio instalar o IIS conforme vimos anteriormente. 


BIS 
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Importante 
A No Ubuntu, utilizando o Apache HTTP Server como Web Server, vocé deve salvar o pro- 
jeto javascript em /home/<USUARIO>/public html. Lembre-se que é necessário 
instalar e configurar o Apache HTTP Server como vimos anteriormente. 


eo NetBeans IDE 7.3 al 


ada ne: JT YB- 


<No Project Open> 


Figura 4.1: Projeto javascript 
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ooo NetBeans IDE 7.3 y" 
EE FETE m A Ganan © 
Projects © 

Steps Choose Project 
1. Choose Project Categories: Projects: 
F at Cu —) 
PHP 
> [3 Samples KR 
Description: 
Creates a new HTMLS application configured for HTML, CSS and JavaScript. 
NIE — JN.N 
Figura 4.2: Projeto javascript 

000 NetBeans IDE 7.3 "a 

E RN E OE j TM > B- į (Qr Search (+1) e 
Projects © 

Steps 
1. owe gel ET ea 
2. Name and Location [ Browse... | 
3. Site Template 
4. JavaScript Files 
Project Folder: [Users /keizo/Sites [javascript R 
<No Proj 


Figura 4.3: Projeto javascript 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02- javascript-fixacaol.zip 
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e No projeto javascript, crie um arquivo chamado javascript.html. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>JavaScript</title> 
<script> 
alert("”K19"); 
</script> 
</head> 
<body> 
<h1>K19 - JavaScript</h1> 
«/body» 
«/html» 


=o oa a 
WN HF OO AN AN FWN = 


Código HTML 4.5: javascript.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao2.zip 
(3) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/javascript/public_html/javascript.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/~<USUARIO>/javascript/public_html/javascript.html 


o Altere o arquivo javascript.html do projeto javascript. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>JavaScript</title> 
</head> 
<body> 
<h1>K19 - JavaScript</h1> 


| <script> 


| alert("K19"); 


| </script> 


</body> 
</html> 


a, eX xa 
WN — OW AON ODN FWHNH = 


Cédigo HTML 4.6: javascript.html 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao4.zip 
Q No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/javascript/public_html/javascript.html 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/javascript/public_html/javascript.html 


(6) No projeto javascript, crie um arquivo chamado script.js. 
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= 


alert("K19"); 


Código Javascript 4.2: script.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao6.zip 


Q Altere novamente o arquivo javascript.html do projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>JavaScript</title> 

6 | SsSeriptispec=usecripimstes/senipes 
7 </head> 

8 <body> 

9 <h1>K19 - JavaScript</h1> 

10 </body> 

11 |</html> 


Código HTML 4.7: javascript.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao7.zip 


Q No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/javascript/public_html/javascript.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/~<USUARIO>/javascript/public_html/javascript.html 


‘© Variáveis 


Assim como qualquer linguagem de programação, JavaScript permite a criação de variáveis atra- 


vés da palavra chave var. Toda variável deve ter um nome (identificador). 


1 |var idadeDoJonas = 30; 

2 |var precoDoProduto = 28.75; 

3|var nomeDoInstrutor = "Marcelo Martins"; 
4 var acessoLiberado = true; 


No exemplo anterior, todas as variáveis foram inicializadas. Antes da inicialização, as variáveis 
possuem o valor especial undefined. No próximo exemplo, a variável altura não é inicializada. Por- 


tanto, ela possuíra o valor undefined. 


1 |var altura; 


"9 Operadores 
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Para manipular os valores das variáveis de um programa, devemos utilizar os operadores ofere- 
cidos pela linguagem de programacáo adotada. A linguagem JavaScript possui diversos operadores 
e os principais sáo categorizados da seguinte forma: 


* Aritmético: + - * / 96 
e Atribuição: = += -= *- /= %= ++ -- 
e Relacional: == != < <= > >= 


e Lógico: && || 


Aritméticos 


Os operadores aritméticos funcionam de forma muito semelhante aos operadores da matemá- 
tica. Os operadores aritméticos sáo: 


* Adicáo + 

* Subtração - 

* Multiplicação * 
* Divisão / 


e Módulo 96 


var umMaisUm = 1 + 1; 
// umMaisUm - 2 


var tresVezesDois - 3 * 2; 
// tresVezesDois - 6 


var quatroDivididoPorDois = 4 / 2; 
// quatroDivididoPor2 = 2 


var seisModuloCinco = 6 % 5; 
// seisModuloCinco - 1 


$ pi pi wd xL d d 


à 


à 
cO -410 07i C0 N2—0O to0o-40 Ui 00 n0 >=> 


NN 
= WX 
x 
M 
x 
ea 
a 
o 
I 


2 Qe c» y Cia = 0) 


N 
N 
= 
~~ 
x 
I 
N 


Código Javascript 4.5: Exemplo de uso dos operadores aritméticos 


Importante 

O módulo de um número x, na matemática, é o valor numérico de x desconsiderando 

o seu sinal (valor absoluto). Na matemática expressamos o módulo da seguinte forma: 
| 229] 22: 


Em linguagens de programação, o módulo de um número é o resto da divisão desse número por 
outro. No exemplo acima, o resto da divisão de 6 por 5 é iguala 1. Além disso, lemos a expressão 
6%5 da seguinte forma: seis módulo cinco. 
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Importante 
A As operações aritméticas em JavaScript obedecem as mesmas regras da matemática 
com relação à precedência dos operadores e parênteses. Portanto, as operações são 
resolvidas a partir dos parênteses mais internos até os mais externos, primeiro resolvemos as 
multiplicações, divisões e os módulos. Em seguida, resolvemos as adições e subtrações. 


c Mais Sobre 
As operações de potenciação e raiz quadrada podem ser realizadas através dos métodos 
Math.pow e Math.sgrt. Veja alguns exemplos. 


var a = Math.pow(3, 5); 
// a = 243 


var b = Math.sqrt(9); 
fi 1D =" 3 


a AUN 


Código Javascript 4.6: Potenciação e raiz quadrada 


Concatenação de Strings 


Como vimos anteriormente, o operador + é utilizado para realizar soma aritmética. Mas, ele 
também pode ser utilizado para concatenar strings. Veja um exemplo. 


var sl = "Marcelo"; 
var s2 = s 
var s3 = "Martins"; 


// "Marcelo Martins” 
var s4 = s1 + s2 + $3; 


SU fkWN 


Considere 0 exemplo a seguir. 


var sl = "Idade: "; 
var idade = 30; 


// "Idade: 30" 
var s2 = s1 + idade; 


ok wn — 


Observe que o operador + foi aplicado a um valor numérico e a um texto. Nesses casos, o valor 
numérico é, automaticamente, transformado em texto e a concatenação é realizada. 


Pare para pensar... 
As expressões são avaliadas da esquerda para a direita. Dessa forma, considere o se- 
guinte exemplo: 


d 


| alert(l + 24+ 32+ " testando"): 
2 lalert("testando" + 1 + 2 + 3); 


O que seria exibido nesse exemplo? 
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Atribuicáo 


Nas seções anteriores, já vimos um dos operadores de atribuição, o operador = (igual). Os opera- 


dores de atribuição são: 


acceptum 


à 


à. 
c -410 071i C0 N2—0 toQ0o 4001 3 00 N20 — 


N 
e 


N 
N 


23 


à md i o cà a 


à 


à 
cO -410 071i WN HOW AN DAMN PWD > 


Simples = 


Incremental += 


Decremental -= 


Multiplicativa *= 


Divisória /= 
Modular %= 


Incremento ++ 


Decremento -- 
var valor = 1; 
// valor = 1 
valor += 2; 
ff valor = 3 
valor -= 1; 

// valor = 2 
valor x= 6; 
// valor = 12 
valor /= 3; 
// valor = 4 
valor %= 3; 
// valor = 1 
valor++; 

// valor = 2 


valor--; 
// valor = 1 


Código Javascript 4.10: Exemplo de uso dos operadores de atribuição. 


As instruções acima poderiam ser escritas de outra forma: 


var valor - 1; 
// valor = 1 


valor = valor 
i yalor = 3 


valor = valor 
// valor = 2 


valor = valor 
// valor = 12 


valor = valor 
// valor = 4 


valor = valor 
// valor = 1 
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19 |valor = valor + 1; 
20 |// valor = 2 

21 

22 |valor = valor - 1; 
23 |// valor = 1 


Código Javascript 4.11: O mesmo exemplo anterior, usando os operadores aritméticos. 


Como podemos observar, os operadores de atribuicáo, exceto o simples (=), reduzem a quan- 
tidade de código escrito. Podemos dizer que esses operadores funcionam como "atalhos" para as 


operacóes que utilizam os operadores aritméticos. 


Relacionais 


Muitas vezes precisamos determinar a relacáo entre uma variável ou valor e outra outra variável 
ou valor. Nessas situações, utilizamos os operadores relacionais. As operações realizadas com os 
operadores relacionais devolvem valores booleanos. Os operadores relacionais sao: 


* [gualdade == 

* Diferença != 

e Menor < 

e Menor ou igual <= 
e Maior» 


e Maior ou igual >= 


1 |var valor = 2; 

2 var t = false; 

3|t = (valor == 2); // t = true 

4/t = (valor != 2); // t = false 

mie = valon < 2)s // t = false 

6|t = (valor <= 2); // t = true 

7 |t = (valor > 1); // t = true 

8 |t = (valor >= 1); // t = true 

Código Javascript 4.12: Exemplo de uso dos operadores relacionais em JavaScript. 

Lógicos 


A linguagem JavaScript permite verificar duas ou mais condições através de operadores lógicos. 
Os operadores lógicos devolvem valores booleanos. A seguir descreveremos o funcionamento desses 


operadores. 


5 && (“E”) 


var a = Math.random(); 
var b = Math.random(); 


WN 


alert(a > 0,2 68 b < 0.8); 


Código Javascript 4.13: Exemplo de uso do operador & 


A tabela verdade é uma forma prática de visualizar o resultado dos operadores lógicos. Veja a 


seguir a tabela verdade do operador &&. 
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Figura 4.4: Tabela verdade do operador && 


e II (“OU”) 


var a 
var b 


Math.random(); 
Math.random(); 


WN 


alert(a > 0.2 |] bk = 90:85; 


Cédigo Javascript 4.14: Exemplo de uso do operador || 


A tabela verdade é uma forma prática de visualizar o resultado dos operadores lógicos. Veja a 
seguir a tabela verdade do operador ||. 


NAE 


DENKEN 
NEM MEE ae 
HIM NEM EN 


Figura 4.5: Tabela verdade do operador || 


Operador “!” 


ay 


Valores booleanos podem ser invertidos com o operador de “!” (negação). Por exemplo, podemos 
verificar se uma variável numérica armazena um valor maior do que 0.5 de duas formas diferentes. 


il ol > 0,5 


1|!(d <= 0.5) 


Pré e Pós Incremento ou Pré e Pós Decremento 


Os operadores “++” e “--” podem ser utilizados de duas formas diferentes, antes ou depois de 
uma variável numérica. 
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No primeiro exemplo, o operador “++” foi utilizado depois da variável i. Já no segundo exemplo, 
ele foi utilizado antes da variável i. A primeira forma de utilizar o operador “++” é chamada de pós 
incremento. A segunda é chamada de pré incremento. Analogamente, o operador "--" foi utilizado 
na forma de pós decremento no primeiro exemplo e pré decremento no segundo exemplo. 


Mas, qual é a diferenca entre pré incremento e pós incremento ou entre pré decremento e pós 
decremento? Vamos apresentar a diferenca com alguns exemplos. 


1|var i = 10; 

2 

3 Ene 

4 |alert(i++ == 10); 

Observe que o operador “++” foi utilizado nas expressões do exemplo acima em conjunto com 

o operador “==”. Como dois operadores foram utilizados na mesma expressão, você pode ter dú- 
vida em relação a ordem de execução desses operadores. O incremento com o operador “++” será 
realizado antes ou depois da comparação com o operador “==”? 


Como o operador “++” foi utilizado na forma de pós incremento, a comparação ocorrerá antes 
do incremento. Analogamente, a comparação ocorreria antes do decremento se o operador “--” fosse 
utilizado na forma de pós decremento. 


Agora, considere a utilização do operador “++” na forma de pré incremento. 


1|var i = 10; 
2 
3 P Erase 
4 |alert (++i == 10); 
Nesse último exemplo, a comparação com o operador “==” é realizada depois do incremento 


do operador “++”. Analogamente, a comparação ocorreria depois do decremento se o operador “--” 
fosse utilizado na forma de pré decremento. 


EA Pare para pensar... 


Considere o comportamento do pré incremento, pós incremento, pré decre- 
mento e pós decremento. O que seria exibido nos exemplos abaixo? 


war i = 10; 

2 

3 |var j = ++i + i--; 
4 

5 lalert(j); 
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Operadorternário “?:” 


Considere um programa que controla as notas dos alunos de uma escola. Para exemplificar, va- 
mos gerar a nota de um aluno aleatoriamente. 


1 |var nota = Math.random(); 


O programa deve exibir a mensagem “aprovado” se nota de um aluno for maior ou igual a 0.5 
e “reprovado” se a nota for menor do que 0.5. Esse problema pode ser resolvido com o operador 


ternário. 
nota >= 0.5/|? | “aprovado” |: | “reprovado” 


Condição Valor 1 Valor 2 


Figura 4.6: Operador ternário 


Quando a condição (nota >= 0.5) é verdadeira, o operador ternário devolve o primeiro resultado 
(“aprovado”). Caso contrário, devolve o segundo resultado (“reprovado”). Podemos guardar o resul- 
tado do operador ternário em uma variável ou simplesmente exibi-lo. 


1 Ivar resultado = nota >= 0.5 ? "aprovado" : "reprovado"; 
2 lalert(nota >= 0.5 ? "aprovado" : "reprovado”); 


Nos exemplos anteriores, o operador ternário foi utilizado com valores do tipo string. Contudo, 
podemos utilizá-lo com qualquer tipo de valor. Veja o exemplo a seguir. 


1|var i = nota >= 
2|var d = nota >= 


‘© Controle de fluxo 


if e else 


O comportamento de uma aplicacáo pode ser influenciado por valores definidos pelos usuários. 
Por exemplo, considere um sistema de cadastro de produtos. Se um usuário tenta adicionar um 
produto com preco negativo, a aplicacáo nao deve cadastrar esse produto. Caso contrário, se o preco 
nao for negativo, o cadastro pode ser realizado normalmente. 


Outro exemplo, quando o pagamento de um boleto é realizado em uma agéncia bancária, o sis- 
tema do banco deve verificar a data de vencimento do boleto para aplicar ou náo uma multa por 
atraso. 


Para verificar uma determinada condição e decidir qual bloco de instruções deve ser executado, 
devemos aplicar o comando if. 


1 Hf (preco < 0) f 
2 alert('O preco do produto nào pode ser negativo'); 
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3 |} else { 
4 alert(’Produto cadastrado com sucesso’); 


5 |} 


O comando if permite que valores booleanos sejam testados. Se o valor passado como parámetro 
para o comando if for true, o bloco do if é executado. Caso contrário, o bloco do else é executado. O 
comando else assim como o seu bloco sáo opcionais. 


while 


Em alguns casos, é necessário repetir um determinado trecho de código várias vezes. Por exem- 
plo, suponha que seja necessário exibir 5 vezes a mensagem: “Bom Dia”. Podemos resolver essa 
tarefa com o seguinte código JavaScript. 


console. log("Bom Dia"); 
console. log("Bom Dia"); 
console. log("Bom Dia"); 
console. log("Bom Dia"); 
console. log("Bom Dia"); 


ok wWwn — 


Se ao invés de 5 vezes fosse necessário exibir 100 vezes a mensagem “Bom Dia”, já seriam 100 
linhas de código JavaScript. É muito trabalhoso utilizar essa abordagem para solucionar esse pro- 
blema. 


Através do comando while, é possível executar várias vezes um determinado trecho de código. 


var contador = 0; 


while(contador < 100) { 
console.log("Bom Dia"); 
contador++; 


SU e Wn a 


} 


Código Javascript 4.27: while 


A variável contador indica o námero de vezes que a mensagem "Bom Dia" foi exibida. O operador 
++ incrementa a variável contador a cada iteracáo. O parámetro do comando while deve ser um valor 
booleano. 


for 


O comando for é análogo ao while. A principal diferença entre esses dois comandos é que o for 
recebe trés argumentos. 


X 


for(var contador = 0; contador < 100; contador-**) ( 
2 console.log("Bom Dia"); 


3 |} 


a Exercícios de Fixacáo 


O Adicione um arquivo chamado exibe-nome.html no projeto javascript. 
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1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="exibe-nome.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.8: exibe-nome.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao9.zip 


© Adicione um arquivo chamado exibe-nome.js no projeto javascript. 


1 |for(var contador = 0; contador < 100; contador++) { 
2 console.log("Rafael Cosentino”); 
3 |} 


Código Javascript 4.29: exibe-nome.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao10.zip 


o No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/javascript/public. html/exibe-nome.html 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http: //localhost/-«USUARIO» / javascript/public, html/exibe-nome.html 


Verifique as mensagens exibidas no console do navegador. 


(12) Adicione um arquivo chamado exibe-1-ate-100.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” srcz"exibe-1-ate-100.js"»«/script» 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.9: exibe-1-ate-100.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao12.zip 


(13) Adicione um arquivo chamado exibe-1-ate-100.js no projeto javascript. 


1|for(var contador = 0; contador < 100; contador++) ( 
2 console.log(contador); 
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Código Javascript 4.30: exibe-1-ate-100.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacaol3.zip 


(14) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/javascript/public_html/exibe-1-ate-100.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http: //localhost/~<USUARIO>/javascript/public_html/exibe-1-ate-100.html. 


Verifique as mensagens exibidas no console do navegador. 


Gx» 


o Percorra todos os nümeros de 1 até 100. Para os nümeros impares, exiba no console um “*”, e 


para os números pares, dois “**”. Veja o exemplo abaixo: 


* 
** 
* 
** 
* 
** 
Adicione um arquivo chamado exibe-padrao-1.html no projeto javascript. 
1 [SIDOCTYPE html 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 
6 <script type="text/javascript” src="exibe-padrao-1.js"></script> 
7 </head> 
8 <body> 
9 </body> 
10 |</html> 


Código HTML 4.10: exibe-padrao-1.html 


Arquivo: https://github. com/K19/K19-Exercicios/archive/k02-javascript-fixacao15.zip 


O Adicione um arquivo chamado exibe-padrao-1.js no projeto javascript. 


for(var contador = 1; contador <= 100; contador++) { 
var resto = contador % 2; 
if(resto == 1) { 
console. log("*"); 
} else { 
console. log("*«*" 


ONO FP WDNY 
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Código Javascript 4.31: exibe-padrao-1.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao16.zip 


(17) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/javascript/public_html/exibe-padrao-1.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/~<USUARIO>/javascript/public_html/exibe-padrao-1.html. 


Verifique as mensagens exibidas no console do navegador. 


O Percorra todos os números de 1 até 100. Para os números múltiplos de 4, exiba a palavra “PIN”, 
e para os outros, exiba o próprio número. Veja o exemplo abaixo: 


1 
2 
3 
PIN 
5 
6 
7 
PIN 
Adicione um arquivo chamado exibe-padrao-2.html no projeto javascript. 
1 |«! DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 
6 <script type="text/javascript” src="exibe-padrao-2.js"></script> 
7 </head> 
8 <body> 
9 </body> 
10 |</html> 


Código HTML 4.11: exibe-padrao-2.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao18.zip 


O Adicione um arquivo chamado exibe-padrao-2.js no projeto javascript. 


1 |for(var contador = 1; contador <= 100; contador++) ( 
2 var resto = contador % 4; 

3 if(resto == 0) { 

4 console.log("PI"); 

5 } else ( 

6 console.log(contador); 
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Codigo Javascript 4.32: exibe-padrao-2.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacaol9.zip 


(20) No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/j 


avascript/public_html/exibe-padrao-2.html 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/-«USUARIO? / javascript/public. html/exibe-padrao-2.html. 


Verifique as mensagens exibidas no console do navegador. 


‘© Objetos 


Um objeto é um conjunto de propriedades. Toda propriedade possui nome e valor. O nome 
de uma propriedade pode ser qualquer sequéncia de caracteres. O valor de uma propriedade pode 
ser qualquer valor exceto undefined. Podemos adicionar uma nova propriedade a um objeto que já 
existe. Um objeto pode herdar propriedades de outro objeto utilizando a ideia de prototype. 


Criando objetos 


Um objeto pode ser criado de forma literal com a sintaxe JSON. Veja o exemplo a seguir. 


1 |var objetoVazio = (Jj; 
2|var curso = { 
3 saebar CRI, 
4 nome: "Orientação a Objetos em Java" 
5 
Um objeto pode se relacionar com outros objetos através de propriedades. Observe o código 
abaixo. 
1 |var formacaoJava = { 
2 sigla: "K10", nome: "Formação Desenvolvedor Java", 
3 cursos: [ 
4 1 
5 sigla: "KIT", 
6 nome: "Orientação a Objetos em Java" 
D >, 
8 { 
9 Sigla: "K12", 
10 nome: "Desenvolvimento Web com JSF2 e JPA2" 
11 >, 
12 J 
13 |}; 
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Recuperando o valor de uma propriedade 


Para recuperar os valores das propriedades de um objeto, podemos utilizar o operador 
Veja o exemplo a seguir. 


«€» 


“ » 
ou "[]". 


var curso - ( 
alas uk qq 
nome: “Orientação a Objetos em Java" 


3r 


console.log(curso.sigla); 
console.log(curso["sigla"]); 


var sigla - "sigla"; 
console. log(curso[siglal); 


OO 0“ DOP UUN > 


zx 


Alterando o valor de uma propriedade 


Para alterar o valor de uma propriedade, basta atribuir um novo valor à propriedade do objeto. 


console.log(curso.sigla); 
console.log(curso.nome); 


1 Ivar curso = { 

2 sigla: “Kill”, 

3 nome: “Orientação a Objetos em Java" 

41 

5 

6 |curso,sigla = "K12": 

7 |curso.nome = "Desenvolvimento Web com JSF2 e JPA2"; 
8 

9 

0 


= 


Referéncias 


Os objetos sao acessados através de referéncias. 


var curso = { 
sietan CRIS, 
nome: "Orientação a Objetos em Java" 


Jr 


// copiando uma referéncia 
var x = curso; 


sela o Eq. 
x.nome - "Desenvolvimento Web com JSF2 e JPA2"; 


-— 
O (0-007014 C NN — 


= 
= 


// imprime K12 
console. log(curso.sigla); 


// imprime Desenvolvimento Web com JSF2 e JPA2 
console.log(curso.nome); 


ch cl C 
SU UC PY 


Protótipos 


Podemos criar um objeto baseado em outro objeto existente (protótipo). Para isso, podemos 


utilizar a propriedade especial proto . Observe o código abaixo. 


1/// criando um objeto com duas propriedades 
2|var curso = { 

3 sietan CRS, 

4 


nome: “Orientação a Objetos em Java” 
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segundo 


5 B5 

6 

7|// criando um objeto sem propriedades 
8|var novo curso = {}; 

9 

10 |// definindo o primeiro objeto como protótipo do 
11 (novo.curso. .proto.. = curso; 

12 

13 |// imprime K11 

14 |console.log(novo.curso.sigla); 

15 

16 |// imprime Orientação a Objetos em Java 
17 |console. log(novo curso.nome); 


Também podemos utilizar o método create de Object para criar objetos baseados em objetos 


existentes. Veja o exemplo abaixo. 


// criando um objeto com duas propriedades 


var curso = { 
sigla: “Kill”, 
nome: “Orientação a Objetos em Java" 


Jr 


// criando um objeto sem propriedades 
var novo curso = {}; 


// definindo o primeiro objeto como protótipo do 


segundo 


[novo_curso = Object.create(curso); 


// imprime K11 
console.log(novo.curso.sigla); 


// imprime Orientação a Objetos em Java 
console. log(novo curso.nome); 


LA co, ei eX ux ee à 
"Oo Ui 4» t0 O0o «000-4001 4» UC nN => 


Se uma propriedade for adicionada a um objeto, ela também será adicionada a todos os objetos 


que o utilizam como protótipo. 


var curso - ( 
siglak aKING 
nome: "Orientação a Objetos em Java” 


35 


var novo.curso - Object.create(curso); 


[curso.carga horaria = 36; 


// imprime K11 
console.log(novo.curso.sigla); 


// imprime Orientação a Objetos em Java 
console.log(novo.curso.nome); 


// imprime 36 
console.log(novo.curso.carga horaria); 


LA CA c o 
NOOB WN WO JO PWD >=> 


Por outro lado, se uma propriedade for adicionada a um objeto, ela nào sera adicionada no pro- 


tótipo desse objeto. 


1|var curso = f 

2 sigla: "KT", 

3 nome: “Orientação a Objetos em Java" 

4 |}; 

5 
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var novo curso = Object.create(curso) ; 


[novo_curso.carga_horaria = 36; 


10 |// imprime K11 
11 |console. log(curso.sigla); 


13 |// imprime Orientação a Objetos em Java 
14 |console. log(curso.nome); 


16 |// imprime undefined 
17 |console. log(curso.carga_horaria) ; 


Se o valor de uma propriedade de um objeto for modificado, os objetos que o utilizam como 


protótipo podem ser afetados. 


1 Ivar curso = { 

2 siekak aKING 

3 nome: "Orientação a Objetos em Java” 

4/3; 

5 

6 |var novo curso = Object.create(curso); 

7 

8 [curso.sigla = "K12"; 

9 [curso.nome = "Desenvolvimento Web com JSF2 e JPA2"; 
10 


EN 
EN 


// imprime K12 
console.log(novo.curso.sigla); 


// imprime Desenvolvimento Web com JSF2 e JPA2 
console.log(novo.curso.nome); 


= 3 ou a 
ok wh 


Por outro lado, alterações nos valores das propriedades de um objeto não afetam o protótipo 


desse objeto. 


var curso - ( 
samba: EIS. 
nome: “Orientação a Objetos em Java" 


3r 


var novo.curso - Object.create(curso); 


[novo curso.sigla = "K12"; 


[novo_curso.nome = "Desenvolvimento Web com JSF2 e JPA2"; 


// imprime K11 
console.log(curso.sigla); 


// imprime Orientação a Objetos em Java 
console. log(curso.nome); 


aa vee 
OFPWNH- COWOAN A TT FWDNY = 


Considere um objeto que foi construído a partir de um protótipo. Se o valor de uma propriedade 
herdada do protótipo for alterada nesse objeto, ela se torna independente da propriedade no protó- 
tipo. Dessa forma, alterações no valor dessa propriedade no protótipo não afetam mais o valor dela 


no objeto gerado a partir do protótipo. 


var curso - ( 
sigla: "KIT", 
nome: “Orientação a Objetos em Java" 


1 

2 

3 

4 |}; 
5 

6 |var novo curso = Object.create(curso) ; 
7 
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[novo curso.sigla = "K12"; 

[novo_curso.nome = "Desenvolvimento Web com JSF2 e JPA2"; 
11 [curso.sigla = "K21"; 
1 [curso.nome = "Persisténcia com JPA2 e Hibernate”; 


à. 


// imprime K12 
console.log(novo.curso.sigla); 


à 


à 


à 


// imprime Desenvolvimento Web com JSF2 e JPA2 
console.log(novo.curso.nome); 


à 


à 
oo NONA Q0) h20 — CQ «o CO 


Removendo uma Propriedade 


Podemos remover uma propriedade de um objeto com a função delete. 


var curso - ( 
sugba. CET. 
nome: "Orientação a Objetos em Java" 


3r 


// imprime K11 
console.log(curso.sigla); 


ONO WN -— 


Ite] 


delete curso.sigla; 


= aê 
= o0 


// imprime undefined 
12 |console.log(curso.sigla); 


Verificando a Existéncia de uma Propriedade 


Podemos verificar se uma propriedade existe, podemos utilizar a funcáo in. 


var curso - ( 
sigla: “Kili”, 
nome: “Orientação a Objetos em Java" 


Jg 


// imprime true 
console. log("sigla” in curso); 


// imprime false 
console. log("carga horaria” in curso); 


COON ODO FWYNY > 


= 


(> Exercícios de Fixacáo 


o Adicione um arquivo chamado objetos.html no projeto javascript. 


1 |«! DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="objetos.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 
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Cédigo HTML 4.12: objetos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao21.zip 


(22) Adicione um arquivo chamado objetos.js no projeto javascript. Crie objetos com propriedades 
chamadas sigla e nome. Exiba o valor dessas propriedades no console do navegador. 


var curso = (sigla: "K11", nome: "Orientação a Objetos em Java"); 
console.log(curso.sigla); 
console.log(curso.nome); 


var curso2 = (sigla: "K12", nome: "Desenvolvimento Web com JSF2 e JPA2"}; 
console.log(curso2.sigla); 
console.log(curso2.nome); 


"oU WN 


Código Javascript 4.47: objetos.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao22.zip 


[23] No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/javascript/public. html/objetos.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http: //localhost/~<USUARIO>/javascript/public_html/objetos.html. 


Verifique as mensagens exibidas no console do navegador. 


o Adicione um arquivo chamado referencias.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="referencias.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Cédigo HTML 4.13: referencias.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao24.zip 


(25) Adicione um arquivo chamado referencias.js no projeto javascript. 


var curso = (sigla: "K11", nome: "Orientação a Objetos em Java"); 


// exibe K11 
console.log(curso.sigla); 


// exibe Orientação a Objetos em Java 
console.log(curso.nome); 


NOOB WD 
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var x = curso; 
11 x.sigla = "K12": 
12 x.nome - "Desenvolvimento Web com JSF2 e JPA2"; 


à 


// exibe K12 
console.log(curso.sigla); 


à 


à 


à 


// exibe Desenvolvimento Web com JSF2 e JPA2 
console.log(curso.nome); 


à 


à 
oo NONA WHY CQ «o C 


Código Javascript 4.48: referencias.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao25.zip 


[26] No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/javascript/public_html/referencias. html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/javascript/public html/referencias.html. 


Verifique as mensagens exibidas no console do navegador. 


[27] Adicione um arquivo chamado prototype.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="prototype.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.14: prototype.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao27.zip 


(28) Adicione um arquivo chamado prototype.js no projeto javascript. Crie um objeto a partir de 


outro objeto existente. 


var curso = (sigla: "K11", nome: "Orientação a Objetos em Java”); 
var novo.curso - Object.create(curso); 


// exibe K11 
console.log(novo.curso.sigla); 


// exibe Orientação a Objetos em Java 
console.log(novo.curso.nome); 


OANA 0 nKN-— 


Código Javascript 4.49: prototype.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao28.zip 
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(29) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/javascript/public_html/prototype. html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http: //localhost/~<USUARIO>/javascript/public_html/prototype. html. 


Verifique as mensagens exibidas no console do navegador. 


o Adicione um arquivo chamado propriedade-1.html no projeto javascript. Defina uma propri- 
edade em um objeto utilizado como protótipo e verifique que essa propriedade será adicionada nos 
objetos criados a partir desse protótipo. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="propriedade-1.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.15: propriedade-1.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao30.zip 


o Adicione um arquivo chamado propriedade-1.js no projeto javascript. 


var curso = (sigla: "K11", nome: "Orientação a Objetos em Java"; 
var novo.curso - Object.create(curso); 
curso.carga horaria - 36; 


// exibe K11 
console.log(novo.curso.sigla); 


// exibe Orientação a Objetos em Java 
console.log(novo.curso.nome); 


// exibe 36 
console.log(novo.curso.carga horaria); 


ak dd, cds ends ee 
PWN HH CHO AN DUN tn = 


Código Javascript 4.50: propriedade-1.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao31.zip 


[22] No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/javascript/public. html/propriedade-1.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/javascript/public html/propriedade-1.html. 


m K | Ss www.facebook.com/k1 9treinamentos 331 


JAVASCRIPT 


332 


Verifique as mensagens exibidas no console do navegador. 


o Adicione um arquivo chamado propriedade-2.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="propriedade-2.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.16: propriedade-2.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao33.zip 


o Adicione um arquivo chamado propriedade-2.js no projeto javascript. Defina uma propriedade 


em um objeto e verifique que o protótipo desse objeto nao é afetado. 


var curso = (sigla: "K11", nome: "Orientação a Objetos em Java"); 
var novo.curso - Object.create(curso); 
novo curso.carga horaria = 36; 


// exibe K11 
console.log(curso.sigla); 


// exibe Orientação a Objetos em Java 
console.log(curso.nome); 


// exibe undefined 
console.log(curso.carga horaria); 


a ved ond 
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Código Javascript 4.51: propriedade-2.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao34.zip 


o No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/javascript/public. html/propriedade-2.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http: //1localhost/-«USUARIO» / javascript/public. html/propriedade-2.html. 


Verifique as mensagens exibidas no console do navegador. 


o Adicione um arquivo chamado propriedade-3.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
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5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="propriedade-3.js"></script> 
7 </head> 

8 <body> 

9 </body> 

0 |</html> 


Código HTML 4.17: propriedade-3.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao36.zip 


9 Adicione um arquivo chamado propriedade-3.js no projeto javascript. Altere o valor de uma 
propriedade de um objeto utilizado como protótipo e verifique que essa alteração afetará os objetos 


criados a partir desse protótipo. 


à 


à 


// exibe K12 
console.log(novo.curso.sigla); 


à 


à 


à 


// exibe Desenvolvimento Web com JSF2 e JPA2 
console.log(novo.curso.nome); 


à 


1 |var curso = (sigla: "K11", nome: "Orientação a Objetos em Java"j; 
2 
3 |var novo curso = Object.create(curso); 
4 
5 |// exibe K11 
6 |console.log(novo.curso.sigla); 
7 
8 |// exibe Orientação a Objetos em Java 
9 |console.log(novo.curso.nome); 
10 
11 murso.sigla = "K12": 
12 curso.nome = "Desenvolvimento Web com JSF2 e JPA2"; 
3 
4 
5 
6 
7 
8 


Código Javascript 4.52: propriedade-3.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao37.zip 


o No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/javascript/public. html/propriedade-3.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/javascript/public html/propriedade-3.html. 


Verifique as mensagens exibidas no console do navegador. 


o Adicione um arquivo chamado propriedade-4.html no projeto javascript. 


1 «!DOCTYPE html» 

2 «html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="propriedade-4.js"></script> 

7 </head> 

8 <body> 

9 </body> 
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10 |</html> 


Código HTML 4.18: propriedade-4.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao39.zip 


© Adicione um arquivo chamado propriedade-4.js no projeto javascript. Reescreva em um objeto 
as propriedades herdadas de um protótipo e verifique que alterações nos valores dessas proprieda- 


des no protótipo náo afetam mais os valores delas nesse objeto. 


var novo.curso - Object.create(curso); 


novo.curso.sigla - "K12"; 
novo curso.nome = "Desenvolvimento Web com JSF2 e JPA2"; 


// exibe K12 
console.log(novo.curso.sigla); 


à 


// exibe Desenvolvimento Web com JSF2 e JPA2 
console.log(novo.curso.nome); 


à; 


à 


à 


curso.sisla = "K21"- 
curso.nome - "Persisténcia com JPA2 e Hibernate"; 


à 


à 


à 


// exibe K12 
console.log(novo.curso.sigla); 


à 


à 


à; 
QO «Q o -10071 4» UN HK TCOHWO AN DU BRWHNY — 
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// exibe Desenvolvimento Web com JSF2 e JPA2 
console.log(novo_curso.nome); 


N 
= 


var curso = (sigla: "K11", nome: "Orientação a Objetos em Java"); 


Código Javascript 4.53: propriedade-4.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao40.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/javascript/public. html/propriedade-4.html. 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/-«USUARIO? / javascript/public. html/propriedade-4.html. 


Verifique as mensagens exibidas no console do navegador. 


‘© Funcóes 


As funções em JavaScript são objetos. Você pode armazená-las em variáveis, arrays e outros ob- 
jetos. Elas podem ser passadas como argumento ou devolvidas por outra funcáo. Veja o exemplo 


abaixo. 

1 |var multiplicacao = function(x, y) € 

2 PECURE Es VIR 

3 |} 
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Código Javascript 4.54: Uma forma de criar uma função 


1 function multiplicacao(x, y) { 
2 metum xe xy 


3 |} 


Código Javascript 4.55: Outra forma de criar uma função 


Utilizando uma Funcáo 


Para utilizar a funcáo multiplicacao, podemos chamá-la da seguinte forma. 


1 |var resultado = multiplicação(3,2); 


Código Javascript 4.56: Utilizando a função 


Método 


Quando uma função faz parte de um objeto, ela é chamada de método. Para executar um método, 
devemos utilizar a referência de um objeto e passar os parâmetros necessários. Observe o código 
abaixo. 


var conta = { 
saldo: 0, 
deposita: function(valor) { 
this.saldo += valor; 
J 
J 


conta.deposita(100); 
console.log(conta.saldo); 


OANA OT FWDNMY = 


Cédigo Javascript 4.57: Método 


Apply 
Uma funcáo pode ser associada momentaneamente a um objeto e executada através do método 
apply. 


var deposita = function(valor) { 
this.saldo += valor; 


} 


var conta = { 
saldo: 0 
J 


deposita.apply(conta, [200]); 
console. log(conta. saldo); 


oO «(5 0-100124» UUN > 
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Código Javascript 4.58: Método apply 


Arguments 


Os argumentos passados na chamada de uma função podem ser recuperados através do array 
Arguments. Inclusive, esse array permite que os argumentos excedentes sejam acessados. 
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var soma = function() { 
var soma = 0; 


for(var i = 0; i < arguments.length; i ++) { 
soma += arguments[il; 


) 


return soma; 


} 


var resultado = soma(2,4,5,6,1); 


=o ao a 
WN COO AN ADO 3200 N20 = 


console. log(resultado) ; 


Código Javascript 4.59: Arguments 
p? Exercícios de Fixacáo 


(42) Adicione um arquivo chamado multiplicacao.html no projeto javascript. 


1 |<!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="multiplicacao.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.19: multiplicacao.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao42.zip 


© Adicione um arquivo chamado multiplicacao.js no projeto javascript. 


var multiplicacao = function(x, y) { 
return x SV 


Jr 


var resultado - multiplicacao(5, 3); 


NOOR WN 


console. log(resultado) ; 


Código Javascript 4.60: multiplicacao.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao43.zip 
@ No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/javascript/public_html/multiplicacao. html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 
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http: //localhost/~<USUARIO>/javascript/public_html/multiplicacao. html. 


Verifique as mensagens exibidas no console do navegador. 


(45) Adicione um arquivo chamado metodos.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="metodos.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.20: metodos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao45.zip 


© Adicione um arquivo chamado metodos.js no projeto javascript. 


var conta = { 
saldo: 0, 
deposita: function(valor) { 
this.saldo += valor; 
3 
3; 


conta.deposita(500); 


oO w(- 0-100714» UUN — 
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console.log(conta.saldo); 


Código Javascript 4.61: metodos.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao46.zip 


@ No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/javascript/public. html/metodos.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/javascript/public html/metodos.html. 


Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado soma.html no projeto javascript. 


1 «!DOCTYPE html» 
2 |<html lang="pt-br”> 
3 <head> 


4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="soma.js"></script> 

7 </head> 
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8 <body> 
9 </body> 
10 «/html» 


Cédigo HTML 4.21: soma.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao48.zip 


© Adicione um arquivo chamado soma.js no projeto javascript. 


var soma = function() { 
var soma = 0; 


for(var i = 0; i < arguments.length; i ++) { 
soma += arguments[il; 


) 


return soma; 


JE 


var resultado = soma(2,4,5,6,1); 


A pi ES XA 
WN COCO AN DUO FWDNY >=> 


console. log(resultado) ; 


Código Javascript 4.62: soma.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao49.zip 


o No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/javascript/public_html/soma. html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http: //localhost/~<USUARIO>/javascript/public_html/soma.html. 


Verifique as mensagens exibidas no console do navegador. 


‘© Arrays 


A linguagem Javascript prové um objeto com caracteristicas semelhantes a um array. Esse tipo 
de objeto pode ser criado de forma literal com a sintaxe JSON. 


var vazão = [s 
var cursos = ARO BIN. MSOs Ils 


console. log(vazio[0]); 
// undefined 


console. log(cursos[0]); 
// K01 


console.log(vazio.length); 
HEX) 


console. log(cursos. length); 
74.3 


=o ow a a 
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Percorrendo um Array 


Para percorrer um array, podemos utilizar o comando for. 


1 Wan cursos = KOIT KO2 KS 

2 

3 |for(var i = 0; i < cursos.length; i++) f 
4 console.log(cursos[il); 

51) 


Adicionando Elementos 


Para adicionar um elemento no final de um array, podemos utilizar a propriedade length. 


vVar cursos = UNO RUOTE 


cursos[cursos.length] = "K03"; 
//| ["K01", "KO2", "K03"3 


for(var i = 0; i < cursos.length; i++) ( 
console.log(cursos[il); 


ON aOR WDY 


} 


Também podemos utilizar o método push(). 


Vaile cursos = KOIA 2d: 


cursos.push("K03 ): 
//| ["K01", "KO2", "K03"3 


for(var i = 0; i < cursos.length; i++) { 
console.log(cursos[il); 


co -4001 2 U0tnK€-— 


} 


Removendo Elementos 


O método delete() permite remover elementos de um array. 


yar cUipsos E OT KD MK STIS 


delete cursos[0]; 
// Lundefined, "K02", "K03"] 


for(var à = O; 1 < eursos.length; 1*9) { 
console, Log(cursos [1 ]):; 


ON OO RWDNY 


} 


Concatenando Arrays 


O método concat() permite concatenar dois arrays. 


var formacaoBasica = ["KO1", "K02", "K03"]; 
var formacaoJava = ["K11", "K12"]; 


var formacaoCompleta - formacaoBasica.concat(formacaoJava); 
//| ["K01", "KO2", "K03", "K11", "K12"j 


for(var i = 0; i < formacaoCompleta.length; i++) { 
console.log(formacaoCompleta[il); 


OON AN FWDNY = 


} 
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Gerando uma String com os Elementos de um Array 


Au kWN 


O método join( cria uma string a partir de um array. 


var formacaoJava = ["K11", "K12"]; 
var resultado - formacaoJava.join(","); 
TF KY hl] 


console. log(resultado) ; 


Removendo o Ultimo Elemento 


= 


COON DUO AUN > 


O método pop() remove e retorna o último elemento. 


var cursos = RI OUI E 

var curso = cursos.pop(); 

HE NAO Lda] 

console.log("Elemento removido: " + curso); 
for(var i = 0; 1 < cursos.length; itr) f 


console.log(cursos[il); 


} 


Invertendo os Elementos de um Array 


ON oOo 4» U0€ n0 — 


O método reverse() inverte a ordem dos elementos de um array. 


van cursos = FAKO UK» Ole. ili: 


cursos.reverse(); 
//| ["K03", "KO2", "K01”] 


for(var i = 0e 1 € cursos.length; itt) f 
console.log(cursos[il); 


} 


Removendo o Primeiro Elemento 


c 


COON OAM HPWH — 


O método shift() remove e retorna o primeiro elemento de um array. 


vVar cursos = ROM KP cos E 


var curso = cursos.shift(); 
Hide \L PASO AKO 


n 


console.log("Elemento removido: + curso); 
for(var i = 0; i < cursos.length; i++) ( 
console. log(cursos[il); 


} 


Copiando um Trecho de um Array 


O método slice() cria uma cópia de uma porção de um array. 


var CURSOS = EKOI T lovee s BROS E RI RE: 
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3 |var formacaoBasica = cursos.slice(0, 3); 

4|// E"KO1", "K02", "K03"] 

5 

6|for(var i = 0; i < formacaoBasica.length; i++) { 

7 console. log(formacaoBasicalil); 

8 |} 


Removendo e Adicionando Elementos em um Array 


O método splice() permite remover elementos do array e adicionar novos elementos. 


Mele CUIPSOS = PAKI OKT KT AK 2 odes] 
2 

3 (pubrsos.splice(2, 3, "Kal", PRI); 

4 Wu CER RT PRB MS 2 7] 

5 

6 |for(war i = 0; i < cursos. length; i++) f 

7 console. log(cursos[il); 

8 |} 


Adicionando um Elemento na Primeira Posicáo 


O método unshift() adiciona elementos na primeira posição de um array. 


1 Va cursos Di IR yee K TS 
2 
3 [|cursos.unshift("K11"5; 
4 |// E"KI1", "K12", "K21", "K22", "K23"] 
5 
6 for(var 3-20: 1 < cursos. length; itt) f 
7 console.log(cursos[il); 
8 |} 
e 
‘© Strings 


Acessando os Caracteres de uma String por Posicáo 


O método charAt() retorna o caractere na posição especificada. 


1 |var curso = "K12"; 


3 |console.log(curso.charAt(0)); 


Recuperando um Trecho de uma String 


O método slice() retorna uma porcáo de uma string. 


1 |var curso = "K12 - Desenvolvimento Web com JSF2 e JPA2"; 


3 |console.log(curso.slice(0,3)); 


Dividindo uma String 


O método split() cria uma array de strings a partir de um separador. 
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var curso = "K12-Desenvolvimento Web com JSF2 e JPA2"; 
var aux = curso.split( - y; 


console. log(aux[0]); 
console. log(aux[1]); 


(> Exercícios de Fixacáo 


o Adicione um arquivo chamado array-length.html no projeto javascript. 


COON OA RWHNH > 
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<!DOCTYPE html> 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - JavaScript</title> 
<script type="text/javascript” src="array-length.js"></script> 
</head> 
<body> 
</body> 
</html> 


Código HTML 4.22: array-length.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao51.zip 


o Adicione um arquivo chamado array-length.js no projeto javascript. 


co 4007014» UC€ n) — 


var vazio = []; 
var eurs os = BKK Re A Kio RR TUR: 


console.log(vazio[01); 
console.log(cursos[0]); 


console.log(vazio.length); 
console.log(cursos.length); 


Código Javascript 4.79: array-length.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao52.zip 


o No Windows, utilize o Chrome para acessar o endereco: 


http: //1localhost/javascript/public. html/array-length.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/javascript/public html/array-length.html. 


Verifique as mensagens exibidas no console do navegador. 


Qo Adicione um arquivo chamado array-elementos.html no projeto javascript. 


1[«! DOCTYPE html» 
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<html lang="pt-br"> 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - JavaScript</title> 
<script type="text/javascript” src="array-elementos.js"></script> 
</head> 
<body> 
</body> 
</html> 


Ovo 0i PWN 


E 


Código HTML 4.23: array-elementos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao54.zip 


o Adicione um arquivo chamado array-elementos.js no projeto javascript. 


var cursos = E KME AKIZE A Kar IS leer IRS na: 
for(var i = 0; i < cursos.length; itt) ( 
console. log(cursos[il); 


WN 


} 


Código Javascript 4.80: array-elementos.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao55.zip 


o No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/javascript/public. html/array-elementos.html 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http://localhost/~<USUARIO>/javascript/public_html/array-elementos. html 


Verifique as mensagens exibidas no console do navegador. 


@ Adicione um arquivo chamado array-add.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="array-add.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.24: array-add.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao57.zip 


o Adicione um arquivo chamado array-add.js no projeto javascript. 


1 Man cürsos = FEKTE aie eee le RD Ros UK STi]: 
2 
3 |cursos[cursos.length] = "K01"; 
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for(var i = 0; i < cursos.length; i++) ( 
console. log(cursos[i]); 


NO f 


} 


Código Javascript 4.81: array-add.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao58.zip 


o No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/javascript/public. html/array-add.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/javascript/public html/array-add.html. 


Verifique as mensagens exibidas no console do navegador. 


o Adicione um arquivo chamado array-push.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="array-push.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.25: array-push.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao60.zip 


Qo Adicione um arquivo chamado array-push.js no projeto javascript. 


1 War Guisosm a IM ee EK IRS STRE iva Ne 
2 

3 |cursos.push("K01"); 

4 

5 /for(var y = 0: 1 < cursos.length; itt) f 

6 console.log(cursos[il); 

y p» 


Código Javascript 4.82: array-push.js 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao61.zip 
Q No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/javascript/public_html/array-push. html 


No Ubuntu, utilize o Chrome para acessar o endereço: 
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http: //localhost/~<USUARIO>/javascript/public_html/array-push. html 


Verifique as mensagens exibidas no console do navegador. 


[63] Adicione um arquivo chamado array-concat.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="array-concat.js”></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.26: array-concat.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao63.zip 


[64] Adicione um arquivo chamado array-concat.js no projeto javascript. 


var formacaoJava - ["K11","K12"]; 
var formacaoJavaAvancado - ["K21","K22","K23"]; 


var formacaoCompleta - formacaoJava.concat(formacaoJavaAvancado); 


for(var i = 0; i « formacaoCompleta.length; i++) { 
console. log(formacaoCompleta[lil); 


ON oan RWHNY — 


} 


Código Javascript 4.83: array-concat.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao64.zip 


[65] No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/javascript/public. html/array-concat.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/javascript/public html/array-concat.html. 


Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado array-pop.html no projeto javascript. 


1 «!DOCTYPE html» 

2 «html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="array-pop.js"></script> 

7 </head> 

8 <body> 

9 </body> 
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10 |</html> 


Código HTML 4.27: array-pop.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao66.zip 


@ Adicione um arquivo chamado array-pop.js no projeto javascript. 


VA cursos = Ll AR RO i ee aS 


var curso = cursos.pop(); 


ak 0nP.— 


console. log(curso); 


Código Javascript 4.84: array-pop.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao67.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/javascript/public. html/array-pop.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http: //localhost/~<USUARIO>/javascript/public_html/array-pop.html. 


Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado array-reverse.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="array-reverse. js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.28: array-reverse.html 


Arquivo: https://github. com/K19/K19-Exercicios/archive/k02-javascript-fixacao69.zip 


(70) Adicione um arquivo chamado array-reverse.js no projeto javascript. 


TMar cursos = AKTI ail ea eee Cres eS 
2 

3 |cursos.reverse(); 

4 

5 |for(var i = 0; i < cursos.length; i++) f 

6 console.log(cursos[il); 

7j 


Código Javascript 4.85: array-reverse.js 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao70.zip 


@ No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/javascript/public. html/array-reverse.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http: //localhost/-«USUARIO»? / javascript/public. html/array-reverse.html. 


Verifique as mensagens exibidas no console do navegador. 


Q Adicione um arquivo chamado array-shift.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="array-shift.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.29: array-shift.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao72.zip 


Q Adicione um arquivo chamado array-shift.js no projeto javascript. 


1 Nanecunsossce KI KI Ran 2s EK d 
2 

3 |var curso = cursos.shift(); 

4 

5 |console.log("Elemento removido: " + curso); 

6 

7 |for(var i = 0; i < cursos length; i++) f 

8 console. log(cursos[il); 

95 


Código Javascript 4.86: array-shift.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao73.zip 


Q No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/javascript/public. html/array-shift.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http: //1localhost/-«USUARIO? / javascript/public html/array-shift.html. 


Verifique as mensagens exibidas no console do navegador. 
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© Adicione um arquivo chamado array-slice.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="array-slice.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.30: array-slice.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao75.zip 


Q Adicione um arquivo chamado array-slice.js no projeto javascript. 


1 War CURSOS = FEKI ges PTS RD eer Ie 
2 

3 |var formacaoJava = cursos.slice(0,2); 

4 

5 |for(var i = 0; i < formacaoJava.length; i++) { 
6 console. log(formacaoJavalil); 

7 |} 


Código Javascript 4.87: array-slice.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao76.zip 


@ No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/javascript/public. html/array-slice.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http: //localhost/-«USUARIO? / javascript/public html/array-slice.html. 


Verifique as mensagens exibidas no console do navegador. 


@ Adicione um arquivo chamado array-unshift.html no projeto javascript. 


1 «!DOCTYPE html» 

2 <html langz"pt-br"» 

3 <head> 

4 <meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="array-unshift.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.31: array-unshift.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao78.zip 
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(79) Adicione um arquivo chamado array-unshift.js no projeto javascript. 


Vel CURSOS: = EA A E TR N S Ap 
cursos.unshift("K11"); 


for(var i = 0; i < cursos.length; i++) ( 
console.log(cursos[il); 


"oU fhWD — 


} 


Código Javascript 4.88: array-unshift.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao79.zip 


o No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/javascript/public. html/array-unshift.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http: //localhost/-«USUARIO»? / javascript/public. html/array-unshift.html. 


Verifique as mensagens exibidas no console do navegador. 


o Adicione um arquivo chamado array-split.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="array-split.js"></script> 

7 </head> 

8 <body> 

9 </body> 

10 |</html> 


Código HTML 4.32: array-split.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao81.zip 


(82) Adicione um arquivo chamado array-split.js no projeto javascript. 


var curso = "K12-Desenvolvimento Web com JSF2 e JPA2"; 
var aux = curso.split("-"); 
console.log(aux[01); 
console.log(aux[11); 


ok Wn 


Código Javascript 4.89: array-split.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao82.zip 


(83) No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/javascript/public_html/array-split.html 
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No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/~<USUARIO>/javascript/public_html/array-split.html. 


Verifique as mensagens exibidas no console do navegador. 


‘© DOM- Document Object Model 


Os documentos HTML assim como os seus elementos são representados por objetos JavaScript. 
Podemos acessar o objeto que representa o documento HTML atual através da variável document. 
Os objetos que representam os elementos do documento HTML atual podem ser acessados através 
dessa variável. 


Recuperando elementos 


e Podemos buscar elementos HTML por ID através do método getElementByld. Esse método 
devolve null se nào existir elemento HTML com o identificador desejado. 


1 |var elemento = document.getElementById("conteudo"); 


* Podemos buscar elementos HTML pelo valor do atributo name através do método getEle- 
mentsByName. Esse método devolve um array com os elementos recuperados. 


1|var array = document.getElementsByName("categoria"); 


* Podemos buscar elementos HTML de um determinado tipo através do método getElementsBy- 
TagName. Esse método devolve um array com os elementos recuperados. 


1 |var array = document.getElementsByTagName("p"); 


* Podemos buscar elementos HTML pelo valor do atributo class através do método getElementsBy- 


ClassName. Esse método devolve um array com os elementos recuperados. 


1 |var array = document.getElementsByClassName("confirmado"); 


* Podemos buscar elementos HTML utilizando seletores CSS através dos métodos querySelec- 
tor e querySelectorAll. O primeiro método devolve o primeiro elemento compatível com o 
seletor CSS passado como parámetro. O segundo método devolve um array com todos os ele- 
mentos compatíveis com o seletor CSS passado como parámetro. 


= 


var elemento = document. querySelector("div.aprovado"); 
2|var array = document. querySelectorAll("div.aprovado"); 


* Podemos acessar os atributos de um elemento HTML através do método getAttribute. Esse 
método recebe como parâmetro o nome do atributo desejado e devolve null ou “” (string vazia) 
se o atributo não existir. 


1 |var valor = elemento. getAttribute(" type"); 


* Também podemos acessar os atributos de um elemento HTML através da propriedade attri- 
butes. 
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1|for(var i = 0; i < elemento.attributes.length - 1; i++) { 
2 console. log(elemento.attributes[i].name + " = " + elemento.attributes[i]. value); 
3 |} 


* Podemos acessar o conteúdo de um elemento HTML através da propriedade innerHTML. Essa 
propriedade armazena o contetido dos elementos HTML em forma de string. 


1 |var conteudo = elemento.innerHTML; 


Alterando elementos 


¢ Podemos modificar os atributos de um elemento HTML através do método setAttribute. 


1 jelemento. setAttribute("type”, "text"); 


* Podemos modificar o estilo de um elemento HTML através da propriedade style. 


1 jelemento.style.color = "red"; 


As propriedades com nome composto devem seguir a convenção Camel Case. 


1 jelemento.style.borderColor = "red"; 


* Podemos modificar o conteúdo de um elemento HTML através da propriedade innerHTML. 


1 jelemento. innerHTML = "Acesse <a href=’http://www.k19.com.br’>K19</a>"; 


Removendo elementos 


* Podemos remover um elemento HTML através do método remove. 


1 |var elemento = document. getElementById(”conteudo"); 
2 |elemento.remove(); 


* Podemos remover um elemento HTML através do seu pai. 


1 |var elemento = document. getElementById("conteudo”"); 
2 |elemento.parentNode. removeChild(elemento) ; 


Adicionando elementos 


¢ Podemos criar um elemento HTML através do método createElement e adicioná-lo em um 
documento HTML através do método appendChild. 


var titulo = document.createElement("h1"); 
titulo.innerHTML = "K19 Treinamentos"; 

var elemento = document. getElementById("conteudo"); 
elemento. appendChild(titulo); 


WN 


* Também podemos adicionar um elemento HTML em um documento HTML através do mé- 
todo insertBefore. 


29) K | € www.facebook.com/k19treinamentos 351 


JAVASCRIPT 


352 


var titulo = document.createElement("h1"); 
titulo.innerHTML = "Cursos K19"; 


var conteudo = document.getElementById("conteudo"); 
var tabela = conteudo.getElementById("tabela-de-cursos"); 


NOOB WDM 


conteudo.insertBefore(titulo, tabela); 


2, Mais Sobre 


dade e esses métodos, recomendamos a consulta aos seguintes endereços: 


* https://developer .mozilla.org/en-US/docs/Web/API/Document 
e https://developer.mozilla.org/en-US/docs/Web/API/element 


Os objetos que representam os documentos e os elementos HTML possuem uma 
grande quantidade de propriedades e métodos. Para saber mais sobre essas proprie- 


p Exercícios de Fixacáo 


@ Adicione um arquivo chamado DOM.html no projeto javascript. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 </head> 

7 <body> 

8 «hl id-"titulo" class="centralizado">K19 - JavaScript</h1> 
9 

10 <form id="formulario” action="#"> 

11 <label for="esporte”>Esporte: </label> 

12 <input id="esporte” type="checkbox” name="categoria”> 

13 

14 «label for="politica”>Politica: </label> 

15 <input id="politica” type="checkbox” name="categoria"> 
16 

17 <label for="economia”>Economia: </label> 

18 <input id="economia” type="checkbox” name="categoria"> 
19 

20 «label for="entretenimento">Entretenimento: </label> 

21 <input id="entretenimento” type="checkbox” name="categoria"> 
22 </form> 

23 

24 <script type="text/javascript” src="DOM.js"></script> 

25 </body> 

26 |</html> 


Código HTML 4.33: DOM.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao84.zip 


O Adicione um arquivo chamado DOM.js no projeto javascript. 
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var titulo - document.getElementById("titulo"); 
console.log(titulo.tagName + ": " + titulo.innerHTML); 


var array - document.getElementsByName("categoria"); 
for(var i = 0; i « array.length; i++) ( 
console.log(array[il.tagName + ": " + array[il.id); 


} 


array = document. getElementsByTagName ("label"); 
for(var i = Us 1 < array. length; itt) f 
console.log(array[il.tagName + ": " + array[il.getAttribute("for")); 


à 


3 


} 


à 


à 


array - document.getElementsByClassName("centralizado"); 
for(var i = 0; i < array.length; itt) f 
console.log(array[i]l.tagName + ": " + array[i].id); 


à 


à 


à 


} 


à 


à 


à 
OANA NT C0 l2— OO (000-4100) PWD — 


var formulario - document.querySelector("body » form"); 
console.log(formulario.tagName + ": " + formulario.getAttribute("action")); 


NNN 
AE Å= O 


array = document.querySelectorAll("label"); 
for(var i = 0; 1 < array. length: itt) f 
console.log(array[i].tagName + ": " + array[il.getAttribute("for")); 


NNN 
ok w 


} 


Cédigo Javascript 4.106: DOM.js 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao85.zip 


[a6] No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/javascript/public. html/DOM.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http: //localhost/~<USUARIO>/javascript/public_htm1/DOM. html. 


Verifique as mensagens exibidas no console do navegador. 


@ No console do navegador, execute os seguintes comandos um de cada vez e observe o resultado. 


1 |var titulo = document.getElementById("titulo"); 

: titulo.style.color = "red"; 

: titulo.innerHTML = "KI9 = JavaScript - DOM”; 

; titulo. remove (); 

j var body = document.querySelector("body"); 

a var form = document.getElementById("formulario"); 
1 body.insertBefore(titulo, form); 


‘© Eventos 
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A interatividade entres as páginas web e os usuários depende fortemente dos eventos que podem 
ser reconhecidos pelos navegadores. Por exemplo, atualmente, os navegadores sáo capazes de iden- 
tificar o movimento do mouse, a digitação do usuário, a finalização do carregamento de uma página 
web, o redimensionamento da janela, entre outros eventos. 


Há uma quantidade muito grande de eventos que podem ser reconhecidos pelos navegadores. 
Recomendamos que você consulte os seguintes endereços para obter maiores informações: 


e http: //www.w3.org/TR/DOM-Level-3-Events/ 
* http://en.wikipedia.org/wiki/DOM events 


Podemos definir o que deve ocorrer quando um determinado evento é detectado. No exemplo 
abaixo, toda vez que o usuario clicar no parágrafo, a mensagem “K19” será exibida no console do 
navegador. 


1 |<p onclick="console.log(’K19’)"> 

2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
3 |</p> 

load 


O evento load é disparado no término do carregamento de um recurso (imagem, script, folhas de 
estilos, entre outros) contido em um documento HTML ou do proprio documento. Podemos definir 
o tratamento desse evento utilizando o atributo onload. Esse atributo pode ser utilizado em diversos 
elementos HTML. Por exemplo: body, img, script e link. 


1 |<body onload="console.log(’K19’)"> 
2 |</body> 


resize 


O evento resize é disparado quando ocorre uma alteração no tamanho de determinados elemen- 
tos. Podemos definir o tratamento desse evento utilizando o atributo onresize. Esse atributo pode 
ser utilizado em diversos elementos HTML. Por exemplo: body, img, form e textarea. 


1 |<body onresizez"console.log('K19")"» 
2 |</body> 


scroll 


O evento scroll é disparado quando a barra de rolagem de um determinado elemento HTML é 
movida. Podemos definir o tratamento desse evento utilizando o atributo onscroll. Esse atributo 
pode ser utilizado em diversos elementos HTML. Por exemplo: body, section, div e textarea. 


1 |<body onscroll-"console.log('K19'5)"» 
2 |</body> 


focus 


O evento focus é disparado quando um determinado elemento ganha o foco. Podemos definir o 
tratamento desse evento utilizando o atributo onfocus. Esse atributo pode ser utilizado em diversos 
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elementos HTML. Por exemplo: input, select e textarea. 


1 <input onfocusz"console.log('K19')" ...> 


change 


O evento change é disparado quando um determinado elemento HTML perde o foco após ter o 
seu conteüdo alterado. Podemos definir o tratamento desse evento utilizando o atributo onchange. 
Esse atributo pode ser utilizado em diversos elementos HTML. Por exemplo: input, select e textarea. 


1 <input onchange="console.log(’K19’)" ...» 


blur 


O evento blur é disparado quando um determinado elemento perde o foco. Podemos definir o 
tratamento desse evento utilizando o atributo onblur. Esse atributo pode ser utilizado em diversos 
elementos HTML. Por exemplo: input, select e textarea. 


1 |sinput onblurs"console.log('K]9')" ...> 


select 


O evento select é disparado quando o texto contido em um input ou textarea é selecionado. 
Podemos definir o tratamento desse evento utilizando o atributo onselect. 


1 |<input onselect="console.log(’K19’)" ...> 


submit 


O evento submit é disparado imediatamente antes do envio de um formulário. Podemos definir 
o tratamento desse evento utilizando o atributo onsubmit. 


1 <form onsubmitz"console.log('K19")" ...> 


reset 


O evento reset é disparado quando um formulario é reiniciado. Podemos definir o tratamento 
desse evento utilizando o atributo onreset. 


1 <form onresetz"console.log('K19')" ...> 


mousedown, mouseup e click 


Os eventos mousedown, mouseup e click estáo relacionados ao ato de clicar nos elementos 
HTML com o botáo esquerdo ou com o botáo do meio do mouse. Podemos definir o tratamento 
desses eventos utilizando os atributos onmousedown, onmouseup e onclick. Esses atributos po- 
dem ser utilizados em diversos elementos HTML. Por exemplo: p, div, table e img. Esses eventos 
ocorrem na seguinte ordem: 
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1. mousedown 
2. mouseup 


3. click 


<p onmousedownz"console.log('1')" 
onmouseup="console.log('2')" 
onclick="console.log('3')"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p> 


aA UWwWN> 


dblclick 


O evento dblclick é disparado quando um determinado elemento recebe um duplo clique. Po- 
demos definir o tratamento desse evento utilizando o atributo ondblclick. Esse atributo pode ser 
utilizado em diversos elementos HTML. Por exemplo: p, div, table e img. 


1 |<p ondblclickz"console.log('K19')"» 

2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
3 |«/p» 

mousemove 


O evento mousemove é disparado quando o usuário movimenta o mouse sobre um determinado 
elemento. Podemos definir o tratamento desse evento utilizando o atributo onmousemove. Esse 
atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img. 


1 |<p onmousemove="console.log(’K19?)”> 

2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
3 |«/p» 

mouveover 


O evento mouveover é disparado quando o ponteiro do mouse passa a estar sobre um deter- 
minado elemento. Podemos definir o tratamento desse evento utilizando o atributo onmouveover. 
Esse atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img. 


1 |<p onmouveoverz"console.log('K19')"» 

2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
3 |«/p» 

mouseout 


O evento mouseout é disparado quando o ponteiro do mouse deixa de estar sobre um determi- 
nado elemento. Podemos definir o tratamento desse evento utilizando o atributo onmouseout. Esse 
atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img. 


1 |<p onmouseout="console.log(’K19’)"> 
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
3 |«/p» 
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keydown, keypress e keyup 


Os eventos keydown, keypress e keyup estão relacionados ao ato de pressionar uma tecla quando 
0 foco está em um determinado elemento HTML. Podemos definir o tratamento desses eventos uti- 
lizando os atributos onkeydown, onkeypress e onkeyup. Esses atributos podem ser utilizados em 
diversos elementos HTML. Por exemplo: input e textarea. Esses eventos ocorrem na seguinte ordem: 


1. keydown 


2. keypress 


3. keyup 


«input 
onkeydown="console.log(’1’) 
onkeypress="console.log(’2’)” 
onkeyupz"console.log('3')" ...> 


n 


WN a 


2, Mais Sobre 
O evento keypress não é disparado para teclas que não representam caracteres. Por 
exemplo, SHIFT, CTRL, ALT, entre outros. 


Métodos: addEventListener e removeEventListener 


Podemos definir o tratamento dos eventos programaticamente através do método addEventLis- 
tener. O primeiro parâmetro desse método é o nome do evento que desejamos tratar. O segundo 
parâmetro é a função que tratará o evento. 


function clickC f 
console. log("click"); 


} 


var elemento = document.getElementById("conteudo"); 
elemento. addEventListener("click", click); 


Ao E w Na 


Nessa abordagem, podemos associar diversas funções para tratar um determinado evento para 
um determinado elemento HTML. 


Também podemos utilizar funções anônimas como mostra o exemplo a seguir. 


var elemento = document. getElementById("conteudo”); 
elemento. addEventListener ( 
elite 
function() { 
console. log("click”) 
Jj 


"oU U0n€-— 


DE 


Podemos remover um listener com o método removeEventListener. 


1 |elemento.removeEventListener("click", click); 


O método removeEventListener não pode ser utilizado para funções anônimas. 
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Propriedades dos objetos do DOM 


Outra forma de definir programaticamente o tratamento dos eventos é utilizar as propriedades 
de evento dos objetos que representam os elementos HTML. Veja o exemplo a seguir. 


var elemento - document.getElementById("conteudo"); 
elemento.onclick = function() { 
console.log("click") 


WN a 


Ja 


Nessa abordagem, apenas uma função pode ser associada a um determinado evento para um 
determinado elemento HTML. 


(> Exercícios de Fixacáo 


Adicione um arquivo chamado eventos.html no projeto javascript. 


1|«! DOCTYPE html» 

2|«html lang="pt-br"> 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - JavaScript</title> 

6 <script type="text/javascript” src="eventos.js"></script> 
7 <style> 

8 body { 

9 width: 2000px; 

10 height: 2000px; 

11 j 

12 

13 div { 

14 width: 200px; 

15 height: 200px; 

16 background-color: yellow; 

17 j 

18 </style> 

19 </head> 

20 <body onresize="resize()” onscroll="scroll()"> 
21 <form> 

22 «label for="campo-nome">Nome:</label> 

23 <input id="campo-nome” type="text"> 

24 </form> 

25 

26 <div></div> 

27 </body> 

28 «/html» 


Cédigo HTML 4.50: eventos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao88.zip 


(89) Adicione um arquivo chamado eventos.js no projeto javascript. 


window.onload = function(event) { 
console.log( "documento carregado"); 


input.onfocus = function() { 


1 
2 
3 
4 var input = document. getElementById("campo-nome”) ; 
5 
6 
7 console. log("focus"); 
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9 

10 input. addEventListener(" change”, function() € 
11 console. log("change”); 

12 325 

13 

14 input.onblur = function() { 

15 console.log("blur"); 

16 3 

17 

18 input.onselect - function() ( 
19 console.log("select"); 

20 3; 

21 

22 input.onkeydown = function() { 
23 console. log("keydown”); 

24 3; 

25 

26 input.onkeypress = function() { 
27 console.log("keypress"); 

28 3 

29 

30 input.onkeyup = function() { 
31 console. log(”keyup”) ; 

32 3; 

33 

34 var div = document.querySelector("div"); 
35 

36 div.onmousedown = function() € 
37 console.log("mousedown"); 

38 3 

39 

40 div.onmouseup - function() ( 
41 console.log("mouseup"); 

42 3; 

43 

44 div.onclick = function() { 

45 console. log("click”); 

46 3 

47 

48 div.ondblclick = function() { 
49 console.log("dblclick"); 

50 3; 

51 

52 div.onmousemove - function(event) ( 
53 var x = event.clientX; 

54 var y = event.clientY; 

55 consoler log mousieMo Ver m Lx ML ay OE 
56 3 

57 

58 div.onmouseover - function() € 
59 console.log("mouseover"); 

60 Jg 

61 

62 div.onmouseout = function() { 
63 console.log("mouseout"); 

64 3; 

65 |}; 

66 

67 |function resize() { 

68 var w = window. outerWidth; 

69 var h = window. outerHeight; 

70 

71 console.log("resize(" + wt*, " + h + ty 
72 |) 

73 

74 |function scroll() { 

75 var x - window.pageXOffset; 

76 var y = window.pageYOffset; 

77 
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78 console, lesse)? xe se se, 7 4e ow ab 7a 
79 |} 


Cédigo Javascript 4.112: eventos.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao89.zip 


O No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/javascript/public_html/eventos. html 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http: //localhost/~<USUARIO>/javascript/public_html/eventos. html. 


Verifique as mensagens exibidas no console do navegador. 


‘© Web Storage 


Podemos armazenar dados nos navegadores dos usuarios através do Web Storage. Ha duas for- 
mas de armazenamento. 


Local storage: Os dados são armazenados nos navegadores indefinidamente. Podemos recuperar 
esses dados mesmo após o fechamento de uma aba ou da janela do navegador. 


Session storage: Os dados armazenados nos navegadores sáo descartados após o fechamento de 
uma aba ou do navegador. 


Os dados armazenados com a API do Web Storage são separados por dominio e não são compar- 
tilhados entre navegadores diferentes. Os navegadores podem determinar a quantidade de espaco 
de armazenamento disponível. Por padráo, esse espaco deve ser de pelo menos 5MB por domínio. 


Armazenando dados 


O método setItem dos objetos localStorage e sessionStorage é utilizado para inserir dados no 
Web Storage. Esse método recebe dois parámetros, uma chave e o um valor. 


1 |localStorage.setItem("usuario”, "Rafael Cosentino”); 
2|sessionStorage.setItem("usuario", "Rafael Cosentino”); 


No exemplo abaixo, mostramos outra forma de armazenar dados no Web Storage. 


1 |localStorage.usuario = "Rafael Cosentino”; 
2 |sessionStorage.usuario = "Rafael Cosentino”; 


Recuperando dados 


O método getItem dos objetos localStorage e sessionStorage é utilizado para recuperar dados 
do Web Storage. Esse método recebe uma chave como parámetro. 
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1 [usuario localStorage.getItem("usuario"); 
2 |usuario = sessionStorage.getlItem("usuario"); 


No exemplo abaixo, mostramos outra forma de recuperar dados do Web Storage. 


1 jusuario = localStorage.usuario; 
2 |usuario = sessionStorage.usuario; 


| 


Podemos percorrer todas as entradas do localStorage ou do sessionStorage da seguinte forma: 


1 |for(var i = 0; i < localStorage.length; i++) À 

2 var key = localStorage.key(i); 

3 var value = localStorage.getItem(key); 

4 |} 

5 

6|for(var i = 0; i < sessionStorage.length; i++) { 
7 var key = sessionStorage.key(i); 

8 var value = sessionStorage.getItem(key); 

9 |} 


Removendo dados 


O método removeltem dos objetos localStorage e sessionStorage é utilizado para remover dados 


do Web Storage. Esse método recebe uma chave como parámetro. 


= 


localStorage.removeItem("usuario"); 
2|sessionStorage.removeItem("usuario"); 


Para remover todas as entradas do localStorage ou do sessionStorage, podemos utilizar o mé- 


todo clear. 


localStorage.clear(); 
2 |sessionStorage.clear(); 


ex Exercícios de Fixacáo 


o Adicione um arquivo chamado web-storage.html no projeto javascript. 


1 |«! DOCTYPE html» 

2 «html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Web Storage</title> 

6 <script src="web-storage.js"></script> 

7 </head> 

8 <body> 

9 <h1>K19 - Web Storage</h1> 

10 <p id="saudacao"></p> 

11 <label for="campoNome”>Nome:</label> 

12 <input id="campoNome” typez"text"» 

13 «button id="botaoEnviar”>Enviar</button> 
14 <button id="botaoLimpar”>Limpar</button> 
15 </body> 

16 |</html> 
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Código HTML 4.51: web-storage.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao91.zip 


[92] Adicione um arquivo chamado web-storage.js no projeto javascript. 


1 |function atualizaSaudacao() { 

2 var saudacao - document.getElementById("saudacao"); 

3 if(localStorage.nome) ( 

4 saudacao.innerHTML = "Olá " + localStorage.nome; 

5 } else { 

6 saudacao.innerHTML = null; 

7 Jj 

8|); 

9 

10 |window.onload = function() { 

11 var botaoEnviar - document.getElementById("botaoEnviar"); 
12 botaoEnviar.onclick = function() { 

13 var campoNome - document.getElementById("campoNome"); 
14 localStorage.nome - campoNome.value; 

15 atualizaSaudacao(); 

16 3; 

17 

18 var botaoLimpar = document.getElementById("botaoLimpar"); 
19 botaoLimpar.onclick = function() { 

20 localStorage.removelItem("nome"); 

21 atualizaSaudacao(); 

22 3 

23 

24 atualizaSaudacao(); 

25 |]; 


Código Javascript 4.120: web-storage.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao92.zip 


(93) No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/javascript/public_html/web-storage.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/javascript/public_html/web-storage.html. 


Preencha o formulário. Abra e feche a janela do navegador. 


"9 History 


Podemos avangar ou retroceder no histórico dos navegadores através do objeto history. Esse 
objeto pode ser acessado através do objeto window. 


Avancando ou retrocedendo 


Podemos avangar ou retroceder uma página no histórico através dos métodos forward e back 
respectivamente. 
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1 |window. history. forward(); 


1 |window.history.back(); 


Também podemos utilizar o método go. Esse método recebe um nümero inteiro como paráme- 
tro. 


// avança uma página 
window.history.go(1); 


// retrocede uma página 
window.history.go(-1); 


// avança trés páginas 
window.history.g0o(3); 


// retrocede trés páginas 
window.history.go(-3); 


-COAN DANA FWNY = 


<i en 


A quantidade de páginas no histórico pode ser obtida através da propriedade length. 


1|var numeroDePaginasDoHistorico = window.history. length; 


Adicionando ou modificando entradas do histórico 


Através do método pushState, podemos adicionar uma entrada na posição atual do histórico. 
Com o método replaceState, podemos modificar a entrada atual do histórico. Esses dois métodos 
recebem os mesmos parámetros. 


pushState(stateObject, title, url); 


= 


replaceState(stateObject, title, url); 


stateObject: Um objeto que pode ser utilizado para armazenar informações sobre a nova entrada. 
title: O titulo da nova entrada. 


url: A URL da nova entrada. 


Como exemplo, considere que a página correspondente à URL www. k19.com. br esteja sendo exi- 
bida no navegador. 


= 


yat state = € into: “info” da 
2 |window.history.pushState(state, "K19 - Cursos", "cursos"); 


O código acima adicionaria uma nova entrada com título "K19 - Cursos" e URL www.k19.com.br/ 
cursos. Ja o código abaixo, substituiria a entrada atual do histórico por uma nova com título “K19 - 
Apostilas" e URL www.k19.com.br/apostilas. 


var state = { info: "info" x 
2 |window.history.replaceState(state, "K19 - Apostilas”, "apostilas"); 
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(> Exercicios de Fixacáo 


[94] Adicione um arquivo chamado historico-paginal.html no projeto javascript. 


ceo -10071 4» C6 n0 — 


Ke 


11 
12 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - Histórico Pagina 1</title> 
</head> 
<body> 
<h1>K19 - Histórico Pagina 1</h1> 
«button onclick="window.history.forward();">Avançar 1 pagina</button> 
«button onclick="window.history.go(2);">Avançar 2 pagina</button> 
</body> 
</html> 


Código HTML 4.52: historico-paginal.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao94.zip 


[o5] Adicione um arquivo chamado historico-pagina2.html no projeto javascript. 


co 0014» Cc) n0 — 


Ke 


11 
12 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - Histórico Pagina 2</title> 
</head> 
<body> 
<h1>K19 - Histórico Pagina 2</h1> 
<button onclick="window.history.back();">Voltar 1 pagina</button> 
<button onclick="window. history. forward();"”>Avangar 1 pagina</button> 
</body> 
</html> 


Código HTML 4.53: historico-pagina2.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao95.zip 


[96] Adicione um arquivo chamado historico-pagina3.html no projeto javascript. 


1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Histórico Página 3</title> 
6 </head> 
7 <body> 
8 <h1>K19 - Histórico Pagina 3</h1> 
9 «button onclick="window.history.go(-2);">Voltar 2 pagina</button> 
10 <button onclick="window.history.back();">Voltar 1 pagina</button> 
11 </body> 
12 |</html> 
Código HTML 4.54: historico-pagina3.html 

Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao96.zip 
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[97] No Windows, utilize o Chrome para acessar na sequéncia os enderecos: 


http: //localhost/javascript/public html/historico-paginal.html. 
http: //localhost/javascript/public html/historico-pagina2.html. 
http: //localhost/javascript/public html/historico-pagina3.html. 


No Ubuntu, utilize o Chrome para acessar na sequéncia os enderecos: 
http: //localhost/~<USUARIO>/javascript/public_html/historico-paginal .html. 


http: //localhost/~<USUARIO>/javascript/public_html/historico-pagina2.html. 
http: //localhost/~<USUARIO>/javascript/public_html/historico-pagina3.html. 


Navegue através dos botões. 


"9 Geolocalizacáo 


Se o usuário permitir, podemos obter a localização dele através da API de Geolocalização do 
HTMLS5. Essa localização pode ser utilizada para diversos propósitos. Por exemplo, podemos exibir 


publicidade relacionada à regiáo onde o usuário está. 


O primeiro passo para utilizar essa API, é definir uma função JavaScript para receber a localização 


quando ela for obtida. 


1 |function positionCallback(position) { 

2 console.log("Latitude: " + position.coords.latitude); 

3 console.log("Longitude: " + position.coords.longitude); 
4 |} 


Depois, devemos utilizar a função getCurrentPosition para solicitar a localização do usuário. 


1 |navigator.geolocation.getCurrentPosition(positionCallback); 


(> Exercícios de Fixacáo 


o Adicione um arquivo chamado geolocalizacao.html no projeto javascript. 


1 |«! DOCTYPE html» 

2 <html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Geolocalizacao</title> 
6 <style type="text/css"> 

7 #mapa { 

8 width: 800px; 

9 height: 600px; 

10 } 

11 </style> 

12 

13 <!-- google maps api --> 
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14 
15 
16 


<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false”> 
</script> 


<script src="geolocalizacao.js"></script> 
</head> 
<body> 
<h1>K19 - Geolocalizacao</h1> 
<div id="mapa"></div> 
</body> 
</html> 


Código HTML 4.55: geolocalizacao.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao98.zip 


[99] Adicione um arquivo chamado geolocalizacao.js no projeto javascript. 


X exl uml, ku eds nd 


à 
ONAN 3C) N2—0O (000-1001 C0 n0 => 


3 


à 
«o 


NNN h2 
Ww b = € 


N 
A 


function positionCallback(position) ( 
var latitude - position.coords.latitude; 
var longitude - position.coords.longitude; 
var geolocation = new google.maps.LatLng(latitude, longitude); 
var mapOptions = { 
zoom: 18, 
center: geolocation, 
mapTypeId: google.maps.MapTypelId. ROADMAP 
3; 
var div = document.getElementById("mapa"); 
var map - new google.maps.Map(div, mapOptions); 
var marker = new google.maps. Marker ({ 
position: geolocation, 
map: map, 
title: "Vocé esta aqui!” 
3955 
B 
window.onload - function() ( 
navigator.geolocation.getCurrentPosition(positionCallback); 
>; 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-fixacao99.zip 


[100) No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/javascript/public html/geolocalizacao.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/javascript/public html/geolocalizacao.html. 


X Alarmes (Contetido Extra) 


Podemos agendar tarefas para serem executadas no futuro. Para isso, podemos utilizar os méto- 
dos setTimeout e setInterval. A primeira permite definir uma função que deve ser executada apenas 
uma vez depois de um determinado tempo. A segunda permite definir uma função que deve ser 
executada de forma periódica. 


366 
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No exemplo a seguir, definimos uma função que será executada uma vez depois de 1600 milise- 
gundos. 


1 |window. setTimeou(function(){ 
2 console.log("timeout"); 
3 |), 1600); 


Por outro lado, nesse outro exemplo, definimos uma funcáo que será executada a cada 2500 mi- 
lisegundos. 


1 |window. setInterval(function(){ 
2 console. log("interval"5; 
Ki), 2ELO(0))) 8 


Podemos cancelar os alarmes com os métodos clearTimeout e clearInterval. Esses métodos 
necessitam da referencia da função associada ao alarme. 


function alarmeTimeout() { 
console.log("timeout"); 


} 


window. setTimeout (alarmeTimeout, 1600); 


NOOB WDM 


window. clearTimeout (alarmeTimeout) ; 


function alarmeInterval() { 
console.log("interval"); 


} 


window. setInterval(alarmeInterval, 2500); 


NOOB WDNY 


window.clearInterval(alarmeInterval); 


A Exercícios Complementares 


o Crie um documento HTML vinculado a um documento JavaScript que exiba no console do 
navegador os numeros de 1 até 50 duas vezes. 


Ó Crie um documento HTML vinculado a um documento JavaScript que exiba no console do 
navegador o seu nome cinco vezes. A cada exibição do seu nome, exiba trés vezes a palavra "K19". 


e Crie um documento HTML vinculado a um documento JavaScript que percorra todos os núme- 
ros de 1 até 60. Para os números múltiplos de 3, exiba “***”. Para os números que não são múltiplos 
de 3, exiba “*”. 


o Crie um documento HTML vinculado a um documento JavaScript que exiba no console do 


Gx» 


navegador todos os números de 1 até 80 exceto os múltiplos de 4 e 7. Para esses exiba "*". 
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Q Crie um documento HTML vinculado a um documento JavaScript que exiba no console do 
navegador um triángulo de “*”. Veja o exemplo abaixo: 


Ó Crie um documento HTML vinculado a um documento JavaScript que exiba no console do 
navegador vários triângulos de “*”. Observe o padrão abaixo. 


@ Os números de Fibonacci são uma sequência de números definida recursivamente. O primeiro 
elemento da sequência é O e o segundo é 1. Os outros elementos são calculados somando os dois 
antecessores. 


0, 1, 1, 2, 3, 5, 8, TEMIR Am5, 89, 144, 233... 


Crie um documento HTML vinculado a um documento JavaScript para exibir os 30 primeiros 
nümeros da sequéncia de Fibonacci. 


(8) Crie um documento HTML vinculado a um documento JavaScript que armazene 10 números 
em um array. Preencha todas as posições do array com valores sequenciais e em seguida exiba-os na 
tela. Depois, escolha duas posições aleatoriamente e troque os valores contidos nelas. Repita essa 
operação 10 vezes. Ao final, exiba o array novamente. 


Dica: O método Math.random() gera números aleatórios maiores ou iguais a 0 e menores do que 
1. O método Math.floor() recebe um número real como parâmetro e devolve o maior inteiro menor 
ou igual a esse número real. 


(2) Crie um documento HTML vinculado a um documento JavaScript que armazene 10 números 
em um array. Preencha todas as posições do array com valores aleatórios e em seguida exiba-os na 
tela. Após exibir o array, ordene o array do menor valor para o maior. Ao final, exiba o array ordenado. 


368 www.k19.com.br [4] KIS 


369 JAVASCRIPT 


Dica: Os arrays possuem um método chamada sort. Esse método ordena os elementos dos ar- 
rays. 


Resumo do Capitulo 


ies A linguagem de programação JavaScript é utilizada principalmente para aumentar a interativi- 
dade entre as páginas web e os usuários. 


[> Cédigo JavaScript pode ser aplicado aos documentos HTML de duas formas: JavaScript interno 
e JavaScript externo. 


[> O carregamento do código JavaScript depende do posicionamento do elemento script. 
p» Comentarios JavaScript de bloco podem ser definidos com os marcadores /* e */. script. 
| Comentarios JavaScript de linha podem ser definidos com o marcador //. script. 

> Em JavaScript, as variáveis são criadas através da palavra especial var. 

E Variáveis não inicializadas possuem o valor especial undefined. 


> Os operadores do JavaScript são: 


* Aritmético: + - * / 96 
e Atribuição: = += -= *- /= %= ++ -- 
e Relacional: == != < <= > >= 


* Lógico: && || 
p O operador + é utilizado para concatenar strings. 
p A linguagem JavaScript permite a definicáo de objetos com a sintaxe do JSON. 
p Funções JavaScript são criadas com a palavra function. 


[> Os métodos getElementById(, getElementsByName(, getElementsByTagName(), getEle- 
mentsByClassName(), querySelector() e querySelectorAll() sao utilizados para recuperar os ele- 
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mentos de um documento HTML. 


p Os métodos getAttribute() e setAttribute() são utilizados, respectivamente, para recuperar e 
alterar os valores dos atributos dos elementos HTML. 


p> O conteúdo de um elemento HTML pode ser acessado através da propriedade innerHTML. 
p» A propriedade style pode ser utilizada para alterar as propriedades CSS dos elementos HTML. 


p Os métodos remove() e removeChild() sáo utilizados para remover elementos de um docu- 
mento HTML. 


» Os métodos appendChild() e insertBefore() são utilizados para adicionar elementos em um 
documento HTML. 


p A interatividade entre as páginas web e os usuários depende dos eventos JavaScript. 
pp Podemos armazenar dados na máquina dos usuários com a API do Web Storage. 
E» Podemos controlar o histórico do navegador com a API History. 


p> Podemos obter a localização dos usuários através da API de geolocalização. 


© Prova 


Ell Qual alternativa está correta? 


a) Podemos associar código JavaScript aos documentos HTML através dos elementos script e js. 
b) O código JavaScript sempre é carregado antes de todos os elementos HTML. 

c) O código JavaScript sempre é colocado dentro do documento HTML. 

d) O elemento script só pode ser colocada no corpo do elemento head. 


e) Podemos associar código JavaScript aos documentos HTML através do elemento script. 


Qual alternativa está correta? 
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a) A palavra especial var é utilizada para criar variáveis. 

b) As variáveis JavaScript armazenam apenas valores do tipo string. 

C) As variáveis JavaScript nào inicializadas possuem o valor empty. 

d) Nalinguagem JavaScript, duas variáveis náo podem armazenar o mesmo valor. 


e) Os nomes das variáveis JavaScript devem iniciar obrigatoriamente com a letra v. 


Considere o seguinte trecho de código JavaScript. 


var i - 10; 


Welle jose stra, “ae alee 


Qual é o valor da variável j? 


a) 18. 
b) 19. 
c) 20. 
d) 21. 


e) 22. 


E Considere o seguinte trecho de código JavaScript. 


TO; 
TS: 


var i 
var j 


"onu 


consoles loci «390 92s 4 4 9 9 qu? s WEE s (gp BAS a Ba Pp Mee s v 
I DR 


O que será exibido no console do navegador? 


a) KOl. 
b) K02. 
c) K03. 
d) K11. 


e) Nenhuma das anteriores. 


Considere o seguinte trecho de código JavaScript. 
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var i = 10; 


while(i++ < 15) { 
console. log(++i); 


} 


Quais nümeros seráo exibidos no console do navegador? 


a) 12, 14e 16. 
b) 12e 14. 
c) 11, 13e 15. 
d) 11e 13. 


e) 11, 12, 13e 14. 


E Considere o seguinte trecho de código JavaScript. 


var objeto = fa: “Bb”, be “Cas: 
console. log(objeto["a"]); 
console. log(objeto["b"]); 
delete objeto.a; 

console. log(objeto["a"]); 


console. log(objeto["b"]); 


O que será exibido no console do navegador? 


a) b, a, b, undefined. 
b) a, b, undefined, a. 
c) b, a, undefined, a. 
d) b, a, undefined, b. 


e) a, b, a, undefined. 


Qual alternativa está correta? 


a) As funções JavaScript são criadas com as palavras func e function. 
b) As funções JavaScript são criadas com a palavra function. 

c) As funções JavaScript são criadas com a palavra func. 

d) Toda função JavaScript deve receber parâmetros. 


e) Alinguagem JavaScript não suporta funções. 
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EH Qual alternativa está correta? 


a) O método getElementsByld() recupera elementos HTML por ID. 
b) O método getElementBy TagName() recupera elementos HTML de um determinado tipo. 


c) A propriedade css dos elementos HTML permite que as propriedades CSS sejam acessadas 
e/ou modificadas. 


d) O método remove() remove elementos de um documento HTML. 


e) Podemos acessar o conteúdo de um elemento HTML através da propriedade html. 


H Qual alternativa está correta? 


a) O evento blur é disparado quando um determinado elemento ganha o foco. 

b) O evento keyup é sempre disparado antes do evento keypress. 

c) Alinguagem JavaScript não suporta eventos. 

d) Aúnica forma de associar os eventos aos elementos HTML é o método addEventListener(). 


e) Todas as alternativas anteriores estão incorretas. 


Qual alternativa está correta? 


a) A API Web Storage permite que dados sejam armazenados nos Web Servers. 


b) Os dados armazenados em Session Storage são descartados após o fechamento da aba ou do 
navegador correspondente. 


c) Para armazenadas dados com a API Web Storage, devemos utilizar o método put(). 
d) Para armazenadas dados com a API Web Storage, devemos utilizar o método add(). 


e) Podemos apagar todos os dados armazenados com a API Web através do método reset(). 


Qual alternativa está correta? 


a) A API History permite descobrir as senhas dos usuários. 
b) Através da API de geolocalização podemos descobrir a localização dos Web Servers. 


c) A localização dos usuários pode ser obtida através da API de geolocalização somente com a 
autorização dos usuários. 
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d) Alocalizacáo dos usuarios pode ser obtida através da API de geolocalizacáo mesmo sem a au- 
torizacáo dos usuarios. 


e) Todas as alternativas anteriores estáo incorretas. 


11 


Minha Pontuação Pontuação Mínima: Pontuação Máxima: 
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‘© Introducáo 


Basicamente, jQuery é uma biblioteca JavaScript. Ela foi desenvolvida para simplificar e diminuir 
a quantidade de código JavaScript. Os principais recursos oferecidos por essa essa biblioteca sáo: 

* Seletores 

* Manipulacáo de elementos HTML 

* Manipulação de propriedades CSS 

e Eventos 


* Efeitos e Animações 


AJAX 


Para utilizar o jQuery, basta adicionar o arquivo JavaScript que contém o código dessa biblio- 
teca em um documento HTML. Esse arquivo JavaScript pode ser obtido no endereço http: //docs. 
jquery.com/Downloading jQuery. Ele está disponível em duas versões: Compressed e Uncom- 
pressed. Em produção, a primeira versão deve ser utilizada para não sobrecarregar a transferência 
de dados entre o Web Server e os navegadores. Em desenvolvimento, podemos utilizar a segunda 
versão pois ela possui um código bem mais legível o que facilita a depuração. 


1 |<head> 
2 <script type="text/javascript” src="jquery.js"></script> 
3 |</head> 


Nessa abordagem, a quantidade de dados transferidos entre o Web Server e os navegadores é 
muito alta. Além disso, dependendo da localização dos usuários, a latência para o download do 
arquivo JavaScript do jQuery pode ser alta também. Para diminuir essa quantidade de dados e essa 
latência, podemos utilizar um CDN (Content Delivery Network). Basicamente, CDN é uma rede de 
computadores conectados à Internet focada na distribuição de conteúdo. Eis algumas opções de 
CDN: 


* CDN do jQuery (MaxCDN) 


1 |<script src="http://code.jquery.com/jquery-1.10.1.min.js”></script> 


* Google CDN 
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<script 
2 src="http://ajax. googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script> 


* Microsoft CDN 


<script 
2 src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script> 


* CDNJS 


sSscpipt 
2 src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 


A documentação completa do jQuery está no endereço http: //docs. jquery.com/. 


(> Exercícios de Fixacáo 


1) Abra o Netbeans e crie um projeto chamado jQuery. 


Importante 

No Windows, utilizando o IIS (Internet Information Services) como Web Server, vocé 

deve salvar o projeto jQuery em C:\inetpub\wwwroot. Lembre-se que é necessário 
instalar o IIS conforme vimos anteriormente. 


Importante 
A No Ubuntu, utilizando o Apache HTTP Server como Web Server, vocé deve salvar o 
projeto jQuery em /home/<USUARIO>/public html. Lembre-se que é necessário 
instalar e configurar o Apache HTTP Server como vimos anteriormente. 
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<No Project Open> 


Figura 5.1: Projeto jQuery 


000 NetBeans IDE 7.3 a 
: Fa =| ES : 5 e : | a T "a > B- 1 (Qr Search (8+1) e 


Steps Choose Project 


1. Choose Project Categories: Projects: 
re 


> L3 Samples EN 


1 


Description: 
Creates a new HTMLS application configured for HTML, CSS and JavaScript. 


Figura 5.2: Projeto jQuery 
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NetBeans IDE 7.3 


. Choose Project 
- Name and Location 
. Site Template 


. JavaScript Files 
Project Folder: [Users /keizo/Sites /jquery 


2T w b R- a Ae 
n _____ New HTN plicati " 


Figura 5.3: Projeto jQuery 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao!.zip 


Ó No projeto jQuery, crie um arquivo chamado jQuery.html. 


SS N ee eee 
OANA 071 3 C0 2 — COW AN DUN PWD — 


NNN 
N + o 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
<meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - jQuery</title> 
<script src="http://code. jquery.com/jquery-1.10.1.min.js"></script> 
<style type="text/css"> 
div { 
height: 200px; 
width: 400px; 
background-color: yellow; 
J 
</style> 
</head> 
<body> 
«button id="esconder">Esconder</button> 
«button id="mostrar”>Mostrar</button> 
<div></div> 


<script src-"jQuery.js"'»«s/script» 
</body> 
</html> 


Código HTML 5.6: jQuery.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao2.zip 


e No projeto jQuery, crie um arquivo chamado jQuery.js. 
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$("#esconder”).click(function() { 
$("div").slideUp(); 
395 


$("ttmostrar").click(function() { 
$("div").slideDown(); 
DE 


NOUA WDM 


Código Javascript 5.1: jQuery.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao3.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/jQuery/public html/jQuery.html 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/~<USUARIO>/jQuery/public_html/jQuery.html. 


‘© Eventos 


ready Esse evento é disparado após o carregamento árvore de elementos do documento 
HTML. 
http://api. jquery.com/ready 

resize Esse evento é disparado quando a janela do navegador é redimensionada. 
http: //api.jquery.com/resize 

scroll Esse evento é disparado quando a barra de rolagem de um elemento é movimentada. 
http://api.jquery.com/scroll 

focus Esse evento é disparado quando um elemento ganha o foco. 
http://api.jquery.com/focus 

focusin Esse evento é disparado quando um elemento ou um dos seus descendentes ganha 
o foco. 


http://api.jquery.com/focusin 


blur Esse evento é disparado quando um elemento perde o foco. 
http://api.jquery.com/blur 

focusout Esse evento é disparado quando um elemento ou um dos seus descendentes perde o 
foco. 


http://api.jquery.com/focusout 

select Esse evento é disparado quando o valor de um elemento é selecionado. 
http://api.jquery.com/select 

change Em determinados casos, esse evento é disparado depois de um elemento ter o seu va- 


lor modificado e em seguida perder o foco. Em outros casos, esse evento é disparado 
depois de um elemento ter o seu valor modificado e selecionado nessa ordem. 


http://api. jquery .com/change 
keydown Esse evento é disparado quando uma tecla é pressionada. 


http://api.jquery.com/keydown 
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keypress 


keyup 


click 


dblclick 


mousedown 


mouseup 


mouseenter 


mouseleave 


hover 


mouveover 


mouseout 


mousemove 


submit 


on 


Esse evento é semelhante ao evento keydown. Contudo, ele nào é disparado para 
teclas que nào representam caracteres (exemplo: SHIFT, CTRL, ALT, entre outros). O 
keypress é disparado depois do keydown. 

http://api.jquery.com/keypress 

Esse evento é disparado quando uma tecla é solta. 

http://api.jquery.com/keyup 

Esse evento é disparado quando o usuário clica sobre um elemento com o botão es- 
querdo ou com o botão do meio do mouse. 

http://api.jquery.com/click 

Esse evento é disparado quando o usuário realiza um duplo clique sobre um ele- 
mento com o botão esquerdo ou com o botão do meio do mouse. 
http://api.jquery.com/dblclick 

Esse evento é disparado quando o usuário pressiona um botão do mouse sobre um 
determinado elemento. 

http://api. jquery .com/mousedown 

Esse evento é disparado quando o usuario solta um botáo do mouse sobre um deter- 
minado elemento. 

http://api.jquery.com/mouseup 

Esse evento é disparado no momento em que o ponteiro do mouse passa a estar 
sobre um determinado elemento. 

http://api.jquery.com/mouseenter 

Esse evento é disparado no momento em que o ponteiro do mouse passa a não estar 
sobre um determinado elemento. 

http://api.jquery.com/mouseleave 

Esse evento é disparado no mouseenter e mouseleave. 

http://api.jquery.com/hover 

Esse evento é disparado no momento em que o ponteiro do mouse passa a estar 
sobre um determinado elemento ou sobre os seus descendentes. 
http://api.jquery.com/mouveover 

Esse evento é disparado no momento em que o ponteiro do mouse passa a nao estar 
sobre um determinado elemento ou sobre os seus descendentes. 
http://api.jquery.com/mouseout 

Esse evento é disparado quando o ponteiro do mouse se move sobre um determi- 
nado elemento ou sobre os seus descendentes. 

http://api.jquery.com/mousemove 

Esse evento é disparado quando um formulário é enviado. 


http://api.jquery.com/submit 


Podemos definir o tratamento dos eventos com o método on. No exemplo abaixo, o primeiro 


DE 


SC body.) ,oni@zelick 
console.log("click"); 


function(»f 


O tratamento de diversos eventos pode ser definido com uma ünica chamada do método on. 


parámetro é o nome do evento que será tratado e o segundo parámetro a funcáo que tratará o evento. 


1 [$(" body") .on("click mouseenter mouseleave", function(){ | 
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2 console.log("click mouseenter mouseleave"); 


3 BXE 


off 


Podemos eliminar o tratamento de um evento com o método off. A seguir, mostramos algumas 
formas de utilizacáo desse método. 


/* Removendo todos os tratamentos associados aos eventos dos parágrafos */ 
$("p") .of FQ; 


/* Removendo todos os tratamentos associados ao evento de clique dos parágrafos */ 
CT Owe (C7 ie 


/* Removendo um tratamento específico associado ao evento de clique dos parágrafos */ 
$("p").off("click", tratamento); 


ON OO RWHNY — 


Atalhos 


O tratamento de um evento pode ser definido através de métodos que funcionam como atalhos 
para o método on. No exemplo abaixo, utilizamos o método click que é um atalho para on("click", 
função). 


1 |$("body").click(function Ot 
2 console.log("click"); 
3|»; 


Analogamente, para cada evento, há um método de atalho com o mesmo nome. 


Propriedades 


Os eventos são associados à informações especificas. Por exemplo, quando o evento click é dis- 
parado, ele é associado a uma coordenada horizontal e uma vertical. Essas coordenadas definem 
a posição do ponteiro do mouse quando o clique ocorreu. Para recuperar essas informações, basta 
adicionar um parâmetro nas funções de tratamento de eventos. 


No exemplo abaixo, utilizamos as propriedades pageX e pageY para recuperar as coordenadas 
correspondentes à posição do ponteiro do mouse quando um clique ocorrer no body. 


1 |$C"body”).click(function(event){ 
2 console. log("click: (" + event.pageX + 


n n 
, 


+ event.pageY + ")"); 


3|»; 
Propriedade 
pageX Coordenada horizontal da posicáo do ponteiro do mouse. 
http://api.jquery.com/event.pageX 
pageY Coordenada vertical da posicáo do ponteiro do mouse. 


http://api.jquery.com/event.pageY 

event.timeStam A diferenca em milissegundos entre 01/01/1970 e o momento no qual o evento foi 
criado. 
http://api.jquery.com/event.timeStamp 

event.type O tipo de evento. 


http://api.jquery.com/event.type 
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Propriedade 


event.which A tecla ou o botao do mouse que foi pressionado. 
http://api. jquery.com/event.which 
Mais Sobre 


Podemos utilizar a propriedade event.which para recuperar o keyCode das teclas 
pressionadas nos eventos keydown, keypress e keyup. Contudo, é importante saber 
que o mapeamento de teclas para os eventos keydown e keyup é diferente do mapeamento de 
teclas para o evento keypress. 


(> Exercicios de Fixacáo 


(5) No projeto jQuery, crie um arquivo chamado eventos.html. 


1 «!DOCTYPE html» 

2|«html langz"pt-br" idz"html"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - jQuery</title> 

6 <script src="http://code. jquery.com/jquery-1.10.1.min.js"></script> 
7 <script src="eventos.js"></script> 
8 <style type="text/css"> 

9 body { 

10 width: 1000px; 

11 height: 800px; 

12 j 

13 tdivi { 

14 width: 400px; 

15 height: 300px; 

16 background-color: yellow; 

17 j 

18 #div2 { 

19 width: 400px; 

20 height: 300px; 

21 background-color: blue; 

22 } 

23 #div-interno { 

24 width: 400px; 

25 height: 300px; 

26 Margin: auto; 

27 background-color: green; 

28 } 

29 </style> 

30 </head> 

31 <body id="body"> 

32 <form id="form1"> 

33 <input type="text” id="input1”"> 
34 </form> 

35 «form idz"form2"» 

36 <input type="text” id-"input2"» 
37 </form> 

38 «div id="div1"> 

39 «div id="div-interno"></div> 

40 </div> 

41 <div id="div2"></div> 

42 </body> 

43 |</html> 
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Cédigo HTML 5.7: eventos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao5.zip 


Ó No projeto jQuery, crie um arquivo chamado eventos.js. 


1|/* tratando o evento readyx/ 

2 [$(document).ready(function()( 

3 console.log("ready"); 

4 

5 /* tratando o evento resize x/ 

6 $(window).resize(function() { 

7 var largura - $(window).width(); 

8 var altura - $(window).height(); 

9 console, log(“resize: (" + largura +=, " + altura + "y"; 
10 395 

11 

12 /* tratando o evento scroll x/ 

13 $(window).scroll(function() { 

14 var x = $(window).scrollLeft(); 

15 var y = $(window).scrollTop(); 

16 consojl'e-tlogGuscepol Uu (Cap ya 

17 395 

18 

19 /* tratando o evento focus */ 

20 $("*"5.focus(function() t1 

21 var tagName - this.tagName; 

22 var id = this id 

23 console, Log("Ffocus: (" + tagName + ", £" + id +") 
24 1); 

25 

26 /* tratando o evento focusin */ 

27 SCs"). focusin(function(» É 

28 var tagName - this.tagName; 

29 var did = this id: 

30 console: logi focusin: (a E tagName stl. Ead Ee) 
31 DE 

32 

33 /* tratando o evento blur x/ 

34 $("x").blur(function() { 

35 var tagName - this.tagName; 

36 var id = this did; 

37 console. log("blur: (" + tagName + *, 4" + id + 2); 
38 DE 

39 

40 /* tratando o evento focusout */ 

41 $C *"3.focusout(function() € 

42 var tagName - this.tagName; 

43 var id = thus id: 

44 console. log("focusout: (" + tagName + ", 4" + id + ")"); 
45 325 

46 

47 /* tratando o evento select x/ 

48 $("input").select(function() A 

49 console.log("select: (" + window.getSelection() + ")”); 
50 395 

51 

52 /* tratando o evento change */ 

53 $("input").change(function() ( 

54 console,log("change: (" + $tthis).val() + *)"); 

55 395 

56 

57 /* tratando o evento keydown x/ 

58 $("input").keydown(function(event) { 

58 console.log("keydown: (" + event.which + ")"); 
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338 


/* tratando o evento keypress x/ 
$("input").keypress(function(event) ( 
console.log("keypress: (" + event.which + ")"5; 


DE 


/* tratando o evento keyup */ 
$("input”).keyup(function(event) { 

console.log("keyup: (" + event.which + ")"); 
395 


/* tratando o evento click */ 
$("#div1").click(function(event) { 
console.log("click: (" + event.pageX + ", " + event.pageY + ")"); 


}); 


/* tratando o evento dblclick x/ 
$("#div1").dblclick(function(event) { 

console.log("dblclick: (" + event.pageX + ", " + event.pageY + ")"); 
3955 


/* tratando o evento mousedown x/ 
$("#div1").mousedown(function(event) { 
console. log("mousedown: (" + event.pageX + ", " + event.pageY + ")"); 


DE 


/x tratando o evento mouseup */ 
$("#div1").mouseup(function(event) { 
console.log("mouseup: (" + event.pageX + ", " + event.pageY + ")"); 


DE 


/* tratando o evento mouseenter */ 
$("#div1").mouseenter(function(event) { 
console.log("mouseenter: (" + event.pageX + ", " + event.pageY + ")"); 


3238 


/* tratando o evento mouseleave x/ 
$("#div1").mouseleave(function(event) { 
console.log("mouseleave: (" + event.pageX + ", " + event.pageY + ")"); 


DE 


/* tratando o evento hover x/ 
$("#div1").hover(function(event) { 
console.log("hover: (" + event.pageX + ", " + event.pageY + ")"); 


DE 


/x tratando o evento mouseover */ 
$("#div1").mouseover(function(event) { 
console.log("mouseover: (" + event.pageX + ", " + event.pageY + ")"); 


338 


/* tratando o evento mouseout */ 
$("#div1").mouseout(function(event) { 
console.log("mouseout: (" + event.pageX + ", " + event.pageY + ")"); 


33$ 


/* tratando o evento mousemove x/ 
$("#div2").mousemove(function(event) { 
console.log("mousemove: (" + event.pageX + ", " + event.pageY + ")"); 
DE 
DE 


Código Javascript 5.7: eventos.js 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao6.zip 
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e No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/jQuery/public_html/eventos. html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http: //localhost/~<USUARIO>/jQuery/public_html/eventos.html. 


Utilize o console do navegador para observar as mensagens exibidas. 


‘© Seletores 


one Seleciona todos os elementos. 


Exemplo: selecionando todos os elementos. 


$("*"); 


http: //api. jquery.com/all-selector 


[atributo] Seleciona os elementos que possuem o atributo especificado. 


Exemplo: selecionando os divs que possuem id. 


AQUA atol) E 


http://api.jquery.com/has-attribute-selector 


[atributo="valor"] Seleciona os elementos tal que o valor de um determinado atributo é igual ao valor 
especificado. 


Exemplo: selecionando os imgs com title igual a logo. 


SiGe tite =i os o MLE 


http: //api.jquery.com/attribute-equals-selector 


[atributo!="valor"] Seleciona os elementos tal que o valor de um determinado atributo não é igual ao 
valor especificado. 


Exemplo: selecionando os imgs com title diferente de logo. 


SC imel title= logos 


http://api.jquery.com/attribute-not-equal-selector 


AM 


[atributo^-"valor"] Seleciona os elementos tal que o valor de um determinado atributo comeca com o 
valor especificado. 


Exemplo: selecionando os imgs com title iniciando com a string logo. 


Sime Meit dla es aloe ^ Tie 


http://api.jquery.com/attribute-starts-with-selector 


[atributo$-"valor"] Seleciona os elementos tal que o valor de um determinado atributo termina com o 
valor especificado. 


Exemplo: selecionando os imgs com title terminando com a string logo. 


$("img[title$-'logo']") 


http://api.jquery.com/attribute-ends-with-selector 
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[atributo*-"valor"] 


[atributo -"valor"] 


[atributo|-" valor"] 


[£1] [f2]... [fn] 


"Aid" 


"tipo" 


“sl s2” 


“sl > s2" 


Seleciona os elementos tal que o valor de um determinado atributo contém o valor 
especificado como substring. 


Exemplo: selecionando os imgs com title contendo a string logo. 


$("img[titlex-'logo']") 


http: //api.jquery.com/attribute-contains-selector 


Seleciona os elementos tal que o valor de um determinado atributo contém o valor 
especificado como palavra. 


Exemplo: selecionando os imgs com title contendo a palavra logo. 


$("img[title--'logo']") 


http://api.jquery.com/attribute-contains-word-selector 


Seleciona os elementos tal que o valor de um determinado atributo é igual ao valor 
especificado ou inicia com esse valor seguido do caractere “-”. 


Exemplo: selecionando os imgs com title iniciando com o prefixo logo. 


Si@ imgiker tile |=" logo) 


http://api.jquery.com/attribute-contains-prefix-selector 


Seleciona os elementos de acordo com os filtros de atributo especificados. 


Exemplo: selecionando os inputs com id e type igual a text. 


$("inputLidl[type-'text']") 


http://api.jquery.com/multiple-attribute-selector 


Seleciona o elemento com o identificador especificado. 


Exemplo: selecionando o elemento com id igual a conteudo . 


$("#conteudo”) 


http: //api. jquery.com/id-selector 


Seleciona todos os elementos do tipo especificado. 


Exemplo: selecionando os divs. 


Si Gaia) 


http://api.jquery.com/element-selector 


Seleciona todos os elementos que combinam com o seletor s2 e sáo descendentes de 
elementos que combinam com o seletor sl. 


Exemplo: selecionando os spans descendentes de um div. 


$("div span”) 


http: //api. jquery .com/descendant- selector 


Seleciona todos os elementos que combinam com o seletor s2 e são filhos de elemen- 
tos que combinam com o seletor sl. 


Exemplo: selecionando os spans filhos de um div. 


Sins pano) 


http://api.jquery.com/child-selector 
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“sl+s2” 


*s] - s2" 


“classe” 


“s1,82,83...” 


‘first 


last 


:eq(n) 


:gt(n) 


Seleciona todos os elementos que combinam com o seletor s2 e sáo irmáos sucessores 
adjacentes de elementos que combinam com o seletor sl. 


Exemplo: selecionando os ps sucessores adjacentes de um hl. 


$("hl + p") 


http: //api.jquery.com/next-adjacent-Selector 


Seleciona todos os elementos que combinam com o seletor s2 e sáo irmáos sucessores 
de elementos que combinam com o seletor s1. 


Exemplo: selecionando os ps sucessores de um hl. 


$("hl ~ p") 


http://api.jquery.com/next-siblings-selector 


Seleciona todos os elementos da classe especificada. 


Exemplo: selecionando os elementos da classe titulo. 


SiGe at buon.) 


http: //api.jquery.com/class-selector 


Seleciona todos os elementos que combinam com pelo menos um dos seletores espe- 
cificados. 


Exemplo: selecionando os divs ou os elementos da classe titulo. 


$("div, .titulo") 


http://api.jquery.com/multiple-selector 


Seleciona o primeiro elemento da lista dos elementos que combinam com o seletor 
utilizado. 


Exemplo: selecionando o primeiro div. 


$("div:first") 


http: //api.jquery.com/first-selector 


Seleciona o ültimo elemento da lista dos elementos que combinam com o seletor uti- 
lizado. 


Exemplo: selecionando o ültimo div. 


$("div:last") 


http://api.jquery.com/last-selector 


Seleciona o n-ésimo elemento da lista dos elementos que combinam com o seletor 
utilizado. 


Exemplo: selecionando o quarto div. 


SiG dive e) 


http: //api. jquery .com/eq-selector 


Da lista de elementos que combinam com o seletor utilizado, seleciona do (n+1)- 
ésimo elemento até o ultimo. 


Exemplo: selecionando do quarto ao ültimo div. 


Siriano E 2 i) 


http: //api.jquery.com/gt-selector 
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:It(n) 


:even 


:odd 


:first-child 


:first-of-type 


:last-child 


:last-of-type 


:nth-child(n) 


Da lista de elementos que combinam com o seletor utilizado, seleciona do primeiro 
elemento até o (n-1)-ésimo. 


Exemplo: selecionando do primeiro ao décimo div. 


$("div:lt(10)") 


http: //api.jquery.com/lt-selector 


Da lista de elementos que combinam com o seletor utilizado, seleciona todos os ele- 
mentos de índice par. 


Exemplo: selecionando os divs de índice 0, 2, 4,6... 


$("div:even") 


http://api.jquery.com/even-selector 


Da lista de elementos que combinam com o seletor utilizado, seleciona todos os ele- 
mentos de indice impar. 


Exemplo: selecionando os divs de índice 1, 3, 5, 7 .... 


$("div:odd") 


http: //api.jquery.com/odd- selector 


Seleciona os elementos que nao possuem um irmáo antecessor. 


Exemplo: selecionando os divs que nao possuem um irmáo antecessor. 


So diye firsta chidi) 


http://api.jquery.com/first-child-selector 


Seleciona os elementos que não possuem um irmão antecessor do mesmo tipo. 


Exemplo: selecionando os divs que não possuem um irmão div antecessor. 


SC div: first- of- type”) 


http://api.jquery.com/first-of-type-selector 


Seleciona os elementos que não possuem um irmão sucessor. 


Exemplo: selecionando os divs que não possuem um irmão sucessor. 


$("div:last-child") 


http://api.jquery.com/last-child-selector 


Seleciona os elementos que não possuem um irmão sucessor do mesmo tipo. 


Exemplo: selecionando os divs que não possuem um irmão div sucessor. 


$("div:last-of-type") 


http://api.jquery.com/last-of-type-selector 


Seleciona os elementos que possuem (n - 1) irmáos antecessores. 


Exemplo: selecionando os divs que possuem exatamente 3 irmáos antecessores. 


$("div:nth-child(4)") 


http://api.jquery.com/nth-child-selector 
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:nth-last-child(n) 


:nth-of-type(n) 


:nth-last-of-type(n) 


:only-child 


:only-of-type 


:parent 


:hidden 


:visible 


Seleciona os elementos que possuem (n - 1) irmáos sucessores. 


Exemplo: selecionando os divs que possuem exatamente 3 irmáos sucessores. 


$("div:nth-child(4)") 


http://api.jquery.com/nth-last-child-selector 


Seleciona os elementos que possuem (n - 1) irmáos antecessores do mesmo tipo. 


Exemplo: selecionando os divs que possuem exatamente 3 irmãos div antecessores. 


$("div:nth-of-type(4)") 


http: //api.jquery.com/nth-of- type- selector 


Seleciona os elementos que possuem (n - 1) irmáos sucessores do mesmo tipo. 


Exemplo: selecionando os divs que possuem exatamente 3 irmáos div sucessores. 


$("div:nth-last-of-type(4)") 


http://api.jquery.com/nth-last-of-type-selector 


Seleciona todos os elementos que náo possuem irmáos. 


Exemplo: selecionando os divs que náo possuem irmáos. 


$("div:only-child") 


http: //api.jquery.com/only-child-selector 


Seleciona todos os elementos que não possuem irmãos do mesmo tipo. 


Exemplo: selecionando os divs que não possuem irmãos div. 


$("div:only-of-type") 


http://api.jquery.com/only-of-type-selector 


Seleciona todos os elementos que possuem filhos. 


Exemplo: selecionando os divs que possuem filho. 


$("div:parent") 


http: //api.jquery.com/parent-selector 


Seleciona os elementos considerados hidden. Os elementos que náo ocupam espaco 
na página sáo considerados hidden. 


Exemplo: selecionando os divs hidden. 


$("div:hidden") 


http://api.jquery.com/hidden-selector 


Seleciona os elementos considerados visible. Os elementos que ocupam espaco na 
página sáo considerados visible. 


Exemplo: selecionando os divs visible. 


$("div:visible") 


http: //api.jquery.com/visible-selector 
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:disabled 


:enabled 


:contains(" texto") 


:empty 


:has(seletor) 


:not(seletor) 


:button 


‘file 


Seleciona todos os elementos desabilitados. 


Exemplo: selecionando os inputs desabilitados. 


$("input: disabled”) 


http://api.jquery.com/disabled- selector 


Seleciona todos os elementos habilitados. 


Exemplo: selecionando os inputs habilitados. 


$(" input: enabled”) 


http://api.jquery.com/enabled-selector 


Seleciona todos os elementos que possuem o texto especificado em seu contetido. 


Exemplo: selecionando os divs que contém o texto k19. 


SiC div contains C7K19 >) 


http: //api. jquery.com/contains-selector 


Seleciona todos os elementos sem conteüdo. 


Exemplo: selecionando os divs que não possuem conteúdo. 


$("div: empty") 


http://api.jquery.com/empty-selector 


Seleciona os elementos que possuem pelo menos um descendente que combina com 
o seletor passado como parâmetro. 


Exemplo: selecionando os divs que possuem pelo menos um img. 


$("div:has(img)) 


http://api.jquery.com/has-selector 


Seleciona os elementos que náo combinam com o seletor especificado. 


Exemplo: selecionando os elementos que não são div. 


S3(C ^ S mete (Ete) 20») 


http: //api.jquery.com/not-selector 


Seleciona todos os elementos button ou com type="button". 


Exemplo: selecionando os inputs com type-'button'. 


$("input:button") 


http://api.jquery.com/button-selector 


Seleciona todos os elementos com type="file". 


Exemplo: selecionando os inputs com type- file’. 


$("input:file") 


http://api.jquery.com/file-selector 
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image 


:password 


adio 


:checkbox 


‘reset 


text 


submit 


input 


:header 


lang(linguagem) 


Seleciona todos os elementos com type="image". 


Exemplo: selecionando os inputs com type-'image'. 


$("input: image”) 


http: //api. jquery.com/image-selector 


Seleciona todos os elementos com type="password". 


Exemplo: selecionando os inputs com type-'password'. 


$(" input: password”) 


http: //api.jquery.com/password- selector 


Seleciona todos os elementos com type-"radio". 


Exemplo: selecionando os inputs com type="radio’. 


Si input- radion) 


http://api.jquery.com/radio-selector 


Seleciona todos os elementos com type="checkbox". 


Exemplo: selecionando os inputs com type-'checkbox'. 


$("input:checkbox") 


http: //api.jquery.com/checkbox- selector 


Seleciona todos os elementos com type-"reset". 


xemplo: selecionando os inputs com type-'reset'. 
E pl l di put: reset’ 


$("input: reset”) 


http: //api. jquery.com/reset-selector 


Seleciona os elementos com type="text". 


Exemplo: selecionando os inputs com type="text’. 


SC input: text”) 


http://api.jquery.com/text-selector 


Seleciona os elementos com type="submit". 


Exemplo: selecionando os inputs com type-'submit'. 


$("input:submit") 


http://api.jquery.com/submit-selector 

Seleciona todos os elementos input e textarea. 
http: //api.jquery.com/input-selector 

Seleciona os títulos (h1,h2,h3,h4,h5 e h6). 
http://api.jquery.com/header-selector 


Seleciona todos os elementos com lang igual à linguagem especificada. 


Exemplo: selecionando os divs com lang-'pt-br'. 


Si div lane ptb) 


http://api.jquery.com/lang-selector 
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‘animated 


‘root 


:selected 


:checked 


:focus 


“target 


Seleciona todos os elementos que estão com alguma animação em andamento. 


Exemplo: selecionando os divs com animação em andamento. 


$("div: animated”) 


http://api.jquery.com/animated-selector 

Seleciona o elemento raiz do documento. 
http://api.jquery.com/root-selector 

Seleciona os elementos option marcados. 

http: //api.jquery.com/selected-selector 

Seleciona todos os checkboxes, radios e options marcados. 
http://api.jquery.com/checked- selector 

Seleciona o elemento que tem o foco. 
http://api.jquery.com/focus-selector 


Seleciona o elemento com id igual ao fragmento da URL. 


http://api.jquery.com/target-selector 


ey Exercícios de Fixacáo 


Ó No projeto jQuery, crie um arquivo chamado seletores.html. 


<head> 


<title>K1 


</head> 
<body> 


ba cà là là l3 là 43 23 cà cà 
OANA NTF C0 l2 — COW AN DUO 3 00 n0 — 


«form» 
«label 
«input 
«label 
«input 
«input 
20 </form> 
21 
22 <ul> 
23 «li»K01 
24 «li»K02 
25 «li»K03 
26 </ul> 
27 </body> 
28 |</html> 


SD O CRER nem: 
<html langz"pt-br"» 


«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<script src="http://code. jquery.com/jquery-1.10.1.min.js"></script> 


<script src="seletores.js"></script> 


<hl id="titulo">K19 - jQuery</h1> 


9 - jQuery</title> 


forz"nome"»Nome: </label> 
id-"nome" type="text” placeHolder="Jonas Hirata” required» 


for="email">Email: </label> 
id="email” type="text” placeHolder-z"jonas.hirataQGemail.com"» 


type="submit” value="Enviar”> 


- Lógica de Programacáo«/li» 
- Desenvolvimento Web com HTML, CSS e JavaScript</li> 
- Lógica de Programacáo«/li» 


Código HTML 5.8: seletores.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao8.zip 
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(9) No projeto jQuery, crie um arquivo chamado seletores.js. 


$(document).ready(function() { 
$("input[type=’text’][required]").css({ 


1 
2 

3 "background-color": "yellow" 
4 ); 

5 

6 $("label:first").css(( 

7 Veolor 3) reds 

8 338 

9 

10 $("input:last").css(( 

11 Se pilto ri billie” 

12 DOE 

13 

14 $("li:even”).css({ 

15 "background-color": "gray" 
16 395 

17 

18 $("input:eq(1)").css(( 

19 "background-color": "green" 
20 DE 

21 

22 $(":header”).css({ 

23 "color": "darkgreen" 

24 395 

25 3); 


Código Javascript 5.63: seletores.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao9.zip 


O No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/jQuery/public html/seletores.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/jQuery/public html/seletores.html. 


‘© Efeitos e Animações 


fadeIn Faz os elementos se tornarem opacos gradativamente. 


http://api.jquery.com/fadeIn 


fadeOut Faz os elementos se tornarem transparentes gradativamente. 


http://api.jquery.com/fadeOut 


fadeToggle Faz os elementos opacos se tornarem transparentes gradativamente e os elementos 


transparentes se tornarem opacos gradativamente. 


http://api.jquery.com/fadeToggle 


fadeTo(opacidade) Modifica a opacidade dos elementos gradativamente até atingir a opacidade especifi- 


cada. 
http://api.jquery.com/fadeTo 
hide Esconde os elementos. 


http://api.jquery.com/hide 
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show Exibe os elementos. 


http: //api. jquery .com/show 


toggle Esconde os elementos que estão sendo exibidos e exibe os elementos que estão es- 
condidos. 


http: //api.jquery.com/toggle 

slideDown Exibe os elementos com efeito de deslizamento. 
http://api.jquery.com/slideDown 

slideUp Esconde os elementos com efeito de deslizamento. 
http: //api.jquery.com/slideUp 


slideToggle Exibe os elementos que estáo escondidos com efeito de deslizamento. Esconde os 
elementos que estáo sendo exibidos com efeito de deslizamento. 


http: //api.jquery.com/slideToggle 


animate Modifica gradativamente determinadas propriedades CSS até atingir os valores espe- 
cificados. 


http: //api. jquery.com/animate 


Duracáo 


Podemos definir a duração dos efeitos ou animações em milissegundos. No exemplo abaixo, o 
tempo de execução do efeito fadeOut foi definido como 1000 milissegundos. 


1/$("a").click(function Ot 
2 $(this).fadeOut(1000); 
355 


Callback 


Podemos definir uma função para ser executada ao término da execução dos efeitos ou das ani- 
mações. No exemplo abaixo, uma função que exibe a mensagem “terminou o fadeOut" foi associada 
ao término do efeito fadeOut. 


$("a").click(function(){ 
$(this).fadeOut(1000, function() { 
console.log("terminou o fadeOut"); 
5 
DE 


a AUN- 


e Exercícios de Fixacáo 


o No projeto jQuery, crie um arquivo chamado efeitos.html. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>K19 - jQuery</title> 
<script src="http://code. jquery.com/jquery-1.10.1.min.js"></script> 
<script src="efeitos.js"></script> 
<style type="text/css"> 
div { 
width: 1000px; 


COMAN AN FPWDNY > 


EN 
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11 height: 100px; 

12 background-color: yellow; 

13 border: 1px solid black; 

14 j 

15 </style> 

16 </head> 

17 <body> 

18 «button id="fadeIn">fadeIn</button> 

19 <button id="fadeOut">fadeOut</button> 

20 <button id="fadeToggle">fadeToggle</button> 
21 «button id="fadeTo1">fadeTo 0.5</button> 

22 <button id="fadeTo2">fadeTo 1.0</button> 

23 <button id="hide”>hide</button> 

24 <button id="show">show</button> 

25 «button id="toggle”>toggle</button> 

26 <button id="slideDown">slideDown</button> 
27 <button id="slideUp">slideUp</button> 

28 <button id="slideToggle”>slideToggle</button> 
29 <button id="animatel">animatel</button> 

30 <button id="animate2">animate2</button> 

31 <div id-"div"»«/div» 

32 </body> 

33 |</html> 


Código HTML 5.9: efeitos.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao1.zip 


(12) No projeto jQuery, crie um arquivo chamado efeitos.js. 


1 |$(document).ready(function(){ 

2 /* fadeIn x/ 

3 $("#fadeIn”).click(function(){ 
4 $("sdiv").fadeIn(); 

5 DE 

6 

7 /* fadeOut */ 

8 $("stfadeOut").click(function (Ot 
9 $("stdiv").fadeOut () ; 

10 DE 

11 

12 /* fadeToggle */ 

13 $("#fadeToggle”).click(function(){ 
14 $("#div").fadeToggle(); 

15 DE 

16 

17 /* fadeTol */ 

18 $("#fadeTo1”).click(function(){ 
19 $("#div").fadeTo("fast”, 0.5); 
20 DE 

21 

22 /* fadeTo2 x/ 

23 $("#fadeTo2").click(function(){ 
24 $("#div").fadeTo("fast”, 1.0); 
25 DE 

26 

27 /* hide */ 

28 $("#hide”).click(function(){ 

29 $("sdiv").hide(); 

30 328 

31 

32 /* show x/ 

33 $("#show").click(function(){ 

34 $("stdiv").show(); 

35 2; 

36 

37 /* toggle x/ 
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38 $("#toggle”).click(function(){ 
39 $("sdiv").toggle(); 

4| 3); 

41 
42 /* slideDown x/ 

43 $("#slideDown"”).click(function(){ 
44 $("#div").slideDown(); 

45 5 

46 
47 /* slideUp x/ 

48 $("#slideUp”).click(function(){ 
49 $("stdiv").slideUp(); 

50 395 

51 
52 /* slideToggle x/ 

53 $("#slideToggle”).click(function(){ 


54 $("#div").slideToggle(); 
55 oe 

56 

57 /* animatel */ 

58 $("#animatel”).click(function(){ 
59 $("#div"). animate ({ 

60 "border swidtb 5px 
61 “Marcin toph: oops 
62 DOE 

63| 3); 

64 


65 /* animate2 x/ 
66 $("#animate2”).click(function(){ 


67 $("#div"). animate ({ 

68 “border -widthe:: tips 
69 mar sinto pis: 

70 DE 

71 5 

72 [395 


Código Javascript 5.66: efeitos.js 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao12.zip 
o No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/jQuery/public html/efeitos.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/~<USUARIO>/jQuery/public_html/efeitos.html. 


‘© Manipulacáo 


addClass Adiciona uma ou mais classes aos elementos selecionados. 


Exemplo: adicionando as classes destaque e grid nos divs. 


$("div").addClass("destaque grid") 


http: //api.jquery.com/addClass 
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removeClass Remove uma, varias ou todas as classes dos elementos selecionados. 


Exemplo: removendo a classe grid dos divs. 


$("div").removeClass("grid"); 


Exemplo: removendo as classes grid e destaque dos divs. 


$("div").removeClass("grid destaque”); 


Exemplo: removendo todas as classes dos divs. 


$("div").removeClass(); 


http: //api.jquery.com/removeClass 


toggleClass Inverte a presenca de uma ou mais classes nos elementos selecionados. 


Exemplo: invertendo a presenca das classes grid e destaque nos divs. 


$("div").toggleClass("grid destaque”); 


http: //api.jquery.com/toggleClass 


hasClass Verifica se algum dos elementos selecionados é da classe especificada. 


Exemplo: verificando se algum parágrafo é da classe destaque. 


var resposta- $("p").hasClass("destaque”) 


http: //api.jquery.com/hasClass 


after Adiciona um determinado conteúdo imediatamente depois de cada um dos elementos se- 
lecionados. 


Exemplo: adicionando um parágrafo imediatamente depois dos h1. 


$("h1").after("<p>subtitulo</p>”) 


http: //api. jquery.com/after 


before Adiciona um determinado contetido imediatamente antes de cada um dos elementos sele- 
cionados. 


Exemplo: adicionando um hr imediatamente antes dos tables. 


$("table”).before("<hr>") 


http://api.jquery.com/before 


insertAfter Semelhante ao after com sintaxe levemente diferente. 


Exemplo: adicionando um parágrafo imediatamente depois dos h1. 


$(«p»subtítulo«/p»).after("h1") 


http://api.jquery.com/insertAfter 


insertBefore Semelhante ao before com sintaxe levemente diferente. 


Exemplo: adicionando um hr imediatamente antes dos tables. 


$("«hr»").before("table") 


http: //api.jquery.com/insertBefore 
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append 


prepend 


appendTo 


prependTo 


attr 


prop 


Adiciona um determinado conteüdo no final do corpo de cada um dos elementos selecio- 
nados. 


Exemplo: adicionando o texto (fonte: K19) no final de cada p. 


$("p").append("«em»(fonte K19)«/em»") 


http: //api.jquery.com/append 


Adiciona um determinado conteüdo no comeco do corpo de cada um dos elementos sele- 
cionados. 


Exemplo: adicionando o texto (fonte: K19) no comeco de cada p. 


$("p").prepend("«em»(fonte K19)«/em»") 


http://api.jquery.com/prepend 


Semelhante ao append com sintaxe levemente diferente. 


Exemplo: adicionando o texto (fonte: K19) no final de cada p. 


$("<em>(fonte K19)«/em»").appendTo("p") 


http: //api.jquery.com/appendTo 


Semelhante ao prepend com sintaxe levemente diferente. 


Exemplo: adicionando o texto (fonte: K19) no comeco de cada p. 


$("<em>(fonte K19)</em>").prependTo("p”) 


http://api.jquery.com/prependTo 


Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar os valores dos 
atributos do primeiro elemento selecionado. O segundo é alterar os valores dos atributos de 
todos os elementos selecionados. 


Exemplo: recuperando o id do primeiro div. 


var id - $("div").attr("id"); 


Exemplo: alterando os atributos SIC, title e alt dos imgs. 


SGC ime, eaten ct 
src: "http://www.k19.com.br/figs/main-header-logo.png", 
Gist her AKTIS 
amt AKII ogon 

5 


http://api.jquery.com/attr 


Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar os valores 
das propriedades do primeiro elemento selecionado. O segundo é alterar os valores das 
propriedades de todos os elementos selecionados. 


Exemplo: recuperando o valor da propriedade checked do primeiro input com type-'checkbox'. 


var checked = $("input[' checkbox']1").prop(" checked"); 


Exemplo: alterando o valor da propriedade checked do primeiro input com type-'checkbox'. 


$("input['checkbox']").prop("checked", false) 


http://api.jquery.com/prop 
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css Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar os valores das 
propriedades CSS do primeiro elemento selecionado. O segundo é alterar os valores das 
propriedades CSS de todos os elementos selecionados. 


Exemplo: recuperando a propriedade CSS color do primeiro div. 


Main color = $C div Or essi colon 5" 


Exemplo: alterando as propriedades color, width e height dos divs. 


Celie ig COSICL 
color; "red", 
width: "300px", 
height: "150px" 

DE 


http://api.jquery.com/css 


removeAttr Remove o atributo especificado dos elementos selecionados. 


Exemplo: removendo o atributo title dos imgs. 


$("img").removeAttr("title"); 


http: //api.jquery.com/removeAttr 


removeProp Remove a propriedade especificada dos elementos selecionados. 


Exemplo: removendo a propriedade title dos imgs. 


$("img").removeProp("title"); 


http: //api.jquery.com/removeProp 


clone Cria uma cópia dos elementos selecionados. 


Exemplo: criando uma cópia de todos os parágrafos. 


var paragrafos - $("p").clone(); 


http://api.jquery.com/clone 


detach Remove os elementos selecionados da árvore de elementos e os devolve. 


Exemplo: retirando os parágrafos. 


var paragrafos = $("p").detach(); 


http://api.jquery.com/detach 


empty Remove o conteüdo dos elementos selecionados. 


Exemplo: removendo o conteúdo dos parágrafos. 


$C"p"). empty O; 


http://api.jquery.com/empty 


remove Remove os elementos selecionados da árvore de elementos. 


Exemplo: removendo os parágrafos. 


$("p”).remove(); 


http://api.jquery.com/remove 
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replaceAll 


replaceWith 


height 


width 


innerHeight 


innerWidth 


Substitui todos os elementos selecionados. 


Exemplo: substituindo todos os parágrafos por <p>K19</p>. 


$("«p»K19«/p»").replaceAll("p"); 


http://api.jquery.com/replaceAll 


Semelhante ao replaceAll com sintaxe levemente diferente. 


Exemplo: substituindo todos os parágrafos por «p» K19«/p». 


$("p").replaceWith("«p»K19«/p»"); 


http: //api.jquery.com/replaceWith 


Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar a altura do 
primeiro elemento selecionado. O segundo é alterar a altura de todos os elementos selecio- 
nados. 


Exemplo: recuperando a altura do primeiro div. 


var altura - $("div").height(); 


Exemplo: alterando altura dos divs. 


$("div").height(100); 


http://api.jquery.com/height 


Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar a largura do 
primeiro elemento selecionado. O segundo é alterar a largura de todos os elementos seleci- 
onados. 


Exemplo: recuperando a largura do primeiro div. 


var largura = $("div").width(); 


Exemplo: alterando largura dos divs. 


$("div").width(100); 


http: //api.jquery.com/width 


Recupera o innerHeight do primeiro elemento selecionado. O innerHeight é a soma da 
altura, margem interna inferior e margem interna superior. 


Exemplo: recuperando o innerHeight do primeiro div. 


var innerHeight - $("div").innerHeight(); 


http://api.jquery.com/innerHeight 


Recupera o innerWidth do primeiro elemento selecionado. O innerWidth é a soma da lar- 
gura, margem interna da esquerda e margem interna da direita. 


Exemplo: recuperando o innerWidth do primeiro div. 


var innerWidth = $("div").innerWidth(); 


http://api.jquery.com/innerWidth 
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outerHeight 


outerWidth 


html 


text 


val 


Recupera o outerHeight do primeiro elemento selecionado. Se esse método for chamado 
sem parámetros, o outerHeight é a soma da altura, margem interna inferior, margem in- 
terna superior, borda inferior e borda superior. Se ele for chamado com o parámetro true, 
o outerHeight é a soma da altura, margem interna inferior, margem interna superior, borda 
inferior, borda superior, margem externa inferior e margem externa superior. 


Exemplo: recuperando o outerHeight do primeiro div. 


var outerHeight1 = $("div").outerHeight(); 
var outerHeight2 = $("div").outerHeight (true) ; 


http://api. jquery.com/outerHeight 


Recupera o outerWidth do primeiro elemento selecionado. Se esse método for chamado 
sem parámetros, o outerWidth é a soma da largura, margem interna da esquerda, margem 
interna da direita, borda da esquerda e borda da direita. Se ele for chamado com o paráme- 
tro true, o outerWidth é a soma da largura, margem interna da esquerda, margem interna 
da direita, borda da esquerda, borda da direita, margem externa da esquerda e margem ex- 
terna da direita. 


Exemplo: recuperando o outerWidth do primeiro div. 


var outerWidthl $("div").outerWidth(); 
var outerWidth2 - $("div").outerWidth(true); 


http: //api.jquery.com/outerWidth 


Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar o conteüdo 
HTML do primeiro elemento selecionado. O segundo é alterar o conteúdo HTML de todos 
os elementos selecionados. 


Exemplo: recuperando o conteádo HTML do primeiro div. 


var conteudo = $("div").html1(); 


Exemplo: alterando o conteüdo HTML dos divs. 


SiCdiv Ar htm Ce KISM I espe cursos da KTS poor 


http://api.jquery.com/html 


Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar o o texto con- 
tido no corpo do primeiro elemento selecionado. O segundo é alterar o texto contido no 
corpo de todos os elementos selecionados. 


Exemplo: recuperando o texto contido no corpo do primeiro div. 


var texton Sè ivex tTO 


Exemplo: alterando o texto contido no corpo dos divs. 


$("div").text("K19 Cursos"); 


http: //api.jquery.com/text 


Esse método é utilizado para recuperar o valor de elementos como input, textarea e select. 
Ele considera o primeiro elemento selecionado. 


Exemplo: recuperador o valor do primeiro input. 


var valor = $("input").val(); 


http: //api.jquery.com/val 
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wrap 


wrapAll 


wrapInner 


unwrap 


offset 


position 


Adiciona na árvore de elementos uma estrutura envolvendo cada um dos elementos seleci- 
onados. 


Exemplo: Envolvendo cada parágrafo com a estrutura <section><div></div></section>. 


$("p").wrap("«section»«div»«/div»«/section»"); 


http: //api.jquery.com/wrap 


Adiciona na árvore de elementos uma estrutura envolvendo o conjunto dos elementos sele- 
cionados. 


Exemplo: Envolvendo os parágrafos com a estrutura <section><div></div></section>. 


$("p").wrapAll("«section»«div»«/div»«/section»"); 


http://api.jquery.com/wrapAll 


Adiciona na árvore de elementos uma estrutura envolvendo o conteüdo de cada um dos 
elementos selecionados. 


Exemplo: Envolvendo o conteüdo dos parágrafos com a estrutura «em»«/em». 


$("p").wrapInner("«em»«/em»"); 


http: //api.jquery.com/wrapInner 


Remove o elemento pai dos elementos selecionados. 


Exemplo: removendo os elementos pai dos parágrafos. 


$C"p"). unwrap () ; 


http://api.jquery.com/unwrap 


Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar a posicáo do 
primeiro elemento selecionado. O segundo é alterar a posição de todos os elementos seleci- 
onados. Nessa alteração, os elementos com position: static passam para position: relative. 


Exemplo: recuperando o offset do primeiro div. 


var offset = $("div").offset(); 
var left = offset. left; 
var top = offset.top; 


Exemplo: alterando o offset dos divs. 


$(" div") .offset(( 
left: 100; 
top: 20: 

395 


http://api.jquery.com/offset 


Recupera a posição do primeiro elemento selecionado em relação ao elemento pai. 


Exemplo: recuperando a posição do primeiro div. 


var position = $("div").position(); 
var left = position.left; 
var top = position.top; 


http://api.jquery.com/position 
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scrollLeft 


Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar a posição da 
barra de rolagem horizontal do primeiro elemento selecionado. O segundo é alterar a posi- 
ção da barra de rolagem horizontal de todos os elementos selecionados. 


Exemplo: recuperando a posição da barra de rolagem horizontal do primeiro div. 


var scrollLeft = $("div").scrollLeft(); 


Exemplo: alterando a posição da barra de rolagem horizontal dos divs. 


$("div").scrollLeft (300); 


http://api.jquery.com/scrollLeft 


scrollTop Esse método pode ser utilizado para dois propósitos. O primeiro é recuperar a posição da 
barra de rolagem vertical do primeiro elemento selecionado. O segundo é alterar a posição 


da barra de rolagem vertical de todos os elementos selecionados. 


Exemplo: recuperando a posição da barra de rolagem vertical do primeiro div. 


var scrollTop = $("div").scrollTop(); 


Exemplo: alterando a posicáo da barra de rolagem vertical dos divs. 


$("div").scrollTop(300); 


http://api.jquery.com/scrollTop 


C Exercícios de Fixacáo 


(14) No projeto jQuery, crie um arquivo chamado manipulacao.html. 


=) — — c.c T 
«oO coo -410 071 3» C0 l2— CO to00 40 01 4» 00 N20 — 


NNNNNNNDN NY 
ONO fF UNO 


SUDOCTYPE html 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset-UTF-8"» 
<title>K19 - jQuery</title> 
<style> 
.destaque { 
background-color: yellow; 
U 
</style> 
<script src="http://code. jquery.com/jquery-1.10.1.min.js"></script> 
<script src="manipulacao.js"></script> 
</head> 
<body> 
<button id="addClass">addClass</button> 
<button id="removeClass">removeClass</button> 
<button id="toggleClass">toggleClass</button> 
<button id="hasClass">hasClass</button> 


<button id="after">after</button> 

<button id="before">before</button> 

<button id="insertAfter”>insertAfter</button> 
<button id="insertBefore">insertBefore</button> 
<button id="append”>append</button> 

<button id="prepend">prepend</button> 

«button id="appendTo">appendTo</button> 

«button id="prependTo”>prependTo</button> 
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29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 «/ 
44 |</ht 


«button id="height”>height</button> 

«button id="width">width</button> 

<button id="innerHeight”>innerHeight</button> 
<button id="innerWidth">innerWidth</button> 
<button id="outerHeight">outerHeight</button> 
<button id="outerWidth">outerWidth</button> 


<div id-"div1"» 
«ul» 
«li»Jonas Hirata</li> 
«li»Marcelo Martins</li> 
<li>Rafael Cosentino</li> 
</ul> 
</div> 
body> 
ml> 


Código HTML 5.10: manipulacao.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao14.zip 


(15) No projeto jQuery, crie um arquivo chamado manipulacao.js. 


1 |$(document).ready(function() € 

2 $("#divl”).css({ 

3 "border": "2px solid black", 

4 "width": "800px", 

5 "height": "200px", 

6 "margin": "T5px", 

7 "padding" = “5px” 

8 15 

9 

10 $("#addClass”).click(function(){ 

11 $("#div1").addClass("destaque”) ; 

12 DE 

13 

14 $("#removeClass"”).click(function(){ 

15 $("#div1"”).removeClass("destaque”); 

16 3318 

17 

18 $("#toggleClass").click(function(){ 

19 $("#div1l").toggleClass("destaque”); 

20 DE 

21 

22 $("#hasClass”).click(function(){ 

23 var destaque = $("#div1").hasClass("destaque”) ; 
24 alert(destaque ? "Com destaque" : "Sem destaque"); 
25 DE 

26 

27 $("#after").click(function(){ 

28 $("stpl").remove(); 

29 $("#div1l").after("<p id='p1'>after<p>"); 

30 338 

31 

32 $("#before”).click(function(){ 

33 $("#p1").remove(); 

34 $("stdivi").before("«p id='p1'>before<p>"); 

35 ys 

36 

37 $("#insertAfter”).click(function(){ 

38 $("#p1").remove(); 

39 $("«p id='p1'>insertAfter<p>"). insertAfter("tdiv1"); 
40 DE 

41 

42 $("#insertBefore”).click(function(){ 

43 $("stpl").remove(); 

44 $("«p id=’pl1’>insertBefore<p>").insertBefore("#div1"); 
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45 DE 

46 

47 $("#append”).click(function(){ 

48 $("#p1").remove(); 

49 $("#div1l"”).append("<p id='p1'>append<p>"); 

50 395 

51 

52 $("#prepend”).click(function(){ 

53 $("#p1").remove(); 

54 $("#div1l”).prepend( "<p id=’p1’>prepend<p>"); 

55 395 

56 

57 $("#appendTo”).click(function(){ 

58 $("stpl").remove(); 

59 $("«p idz'pl'»appendTo«p»").appendTo("stdiv1"); 

60 D; 

61 

62 $("#prependTo").click(function(){ 

63 $("#p1”).remove(); 

64 $("«p id=’p1’>prependTo<p>").prependTo("#divi1”); 

65 395 

66 

67 $("#height”).click(function(){ 

68 $("#p1").remove(); 

69 var height = $("#div1").height(); 

70 $("#div1").after("<p id='p1'>height: " + height -*"«p»"); 
71 325 

72 

73 $("#width”).click(function(){ 

74 $("#p1").remove(); 

75 var width = $("#div1").width(); 

76 SCtdivic A after <p id= pl Y=width. ee width Ipee); 
77 DE 

78 

79 $("#innerHeight”).click(function(){ 

80 $("#p1").remove(); 

81 var innerHeight = $("sdivl").innerHeight(); 

82 $("#div1").after("<p id=’pl’>innerHeight: " + innerHeight -*"«p»"); 
83 395 

84 

85 $("#innerWidth”).click(function(){ 

86 $("#p1").remove(); 

87 var innerWidth = $("#div1").innerWidth(); 

88 S@ Fd) > eahten@ <peid= "pil a= thine Wid this einen Wi dth tipa 
89 395 

90 

91 $("#outerHeight”).click(function(){ 

92 $("#p1").remove(); 

93 var outerHeight = $("sdivl").outerHeight(); 

94 $("#div1").after("<p id='p1'>outerHeight: " + outerHeight +”<p>"),; 
95 DE 

96 

97 $("#outerWidth").click(function(){ 

98 $("#p1”).remove(); 

99 var outerWidth = $("”#div1”).outerWidth(); 

100 $("#div1").after("<p id='p1'>outerWidth: " + outerWidth -*"«p»"); 
101 DE 

102 1}); 


Código Javascript 5.119: manipulacao.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao15.zip 


O No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/jQuery/public_html/manipulacao. html 
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No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/~<USUARIO>/jQuery/public_html/manipulacao. html. 


‘© Mais métodos 


add 


parent 


parents 


siblings 


children 


find 


Adiciona elementos a um conjunto. 


Exemplo: adicionando os spans ao conjunto de divs. 


$("div").add("span"); 


http: //api.jquery.com/add 


Recupera os pais de cada elemento de um conjunto. 


Exemplo: recuperando os pais dos divs e dos spans. 


$("div, span").parent(); 


http://api.jquery.com/parent 


Recupera os ancestrais de cada elemento de um conjunto. 


Exemplo: recuperando os ancestrais dos divs e dos spans. 


$("div, span").parents(); 


http: //api.jquery.com/parents 


Recupera os irmáos de cada elemento de um conjunto. 


Exemplo: recupera os irmáos dos divs e dos spans. 


$("div, span").siblings() 


http://api.jquery.com/siblings 


Recupera os filhos de cada elemento de um conjunto. Opcionalmente, pode receber 
um seletor como parámetro para filtrar o resultado. 


Exemplo: recuperando os filhos dos divs e dos spans. 


$("div, span").children(); 


Exemplo: recuperando os filhos dos divs e dos spans que possuam a classe destaque. 


$("div, span").children(".destaque"); 


http://api.jquery.com/children 


Recupera os descendentes de cada elemento de um conjunto. Opcionalmente, pode 
receber um seletor como parámetro para filtrar o resultado. 


Exemplo: recuperando os descendentes dos divs e dos spans. 


$("div, span").find(); 


Exemplo: recuperando os descendentes dos divs e dos spans que possuam a classe destaque. 


$("div, span").find(".destaque"); 


http://api.jquery.com/find 
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each 


map 


filter 


has 


not 


first 


last 


eq 


Permite executar uma funcáo para cada elemento de um conjunto. 


Exemplo: exibe no console a largura dos divs. 


$("div").each(function(indice, elemento) ( 
console.log($(elemento).width()); 
35 


http: //api.jquery.com/each 


Permite executar uma funcáo para cada elemento de um conjunto. Essa funcáo pode 
devolver um valor. Esses valores seráo devolvidos em um objeto jQuery. 


Exemplo: recupera a largura dos divs. 


function pegaAltura(indice, elemento) ( 
return $(elemento).width(); 
Jj 


var alturas - $("div").map(pegaAltura); 


http: //api.jquery.com/map 


Filtra os elementos de conjunto. 


Exemplo: recuperando os divs da classe grid. 


$("div").filter(".grid"); 


http://api.jquery.com/filter 


Devolve os elementos de um conjunto que possuem um descendente que combina 
com o seletor especificado. 


Exemplo: recupera os divs e os spans que possuem um elemento da classe destaque como descendente. 


$("div, span").has(".destaque") 


http: //api.jquery.com/has 


Remove elementos de um conjunto. 


Exemplo: removendo os elementos da classe destaque do conjunto de divs e spans. 


$("div, span").not(".destaque") 


http: //api.jquery.com/not 


Devolve o primeiro elemento de uma lista. 


Exemplo: devolve o primeiro elemento da lista de divs e spans. 


SC divi span wigs b 


http://api.jquery.com/first 


Devolve o ültimo elemento de uma lista. 


Exemplo: devolve o último elemento da lista de divs e spans. 


$("div, span").1last() 


http://api.jquery.com/last 


Recupera o elemento do índice especificado. 


Exemplo: recupera o sexto elemento da lista de divs e spans. 


SC din, spant). eq(5); 


http: //api.jquery.com/eq 


m K | ce www.facebook.com/k19treinamentos 407 


JQUERY 408 


slice Recupera um determinado trecho de uma lista de elementos. 


Exemplo: recuperando do terceiro ao décimo elementos da lista de divs e spans. 


SCE, spani) S Lice ps 


http://api.jquery.com/slice 


next Devolve os irmãos adjacentes sucessores dos elementos de um conjunto. 


Exemplo: recupera os irmãos adjacentes sucessores dos divs e spans. 


$("div, span").next() 


http: //api.jquery.com/next 


nextAll Devolve os irmáos sucessores dos elementos de um conjunto. 


Exemplo: recupera os irmáos sucessores dos divs e spans. 


$("div, span").nextA11() 


http://api.jquery.com/nextAll 


prev Devolve os irmãos adjacentes antecessores dos elementos de um conjunto. 


Exemplo: recupera os irmãos adjacentes antecessores dos divs e spans. 


$("div, span").prev() 


http: //api.jquery.com/prev 


prevAll Devolve os irmãos antecessores dos elementos de um conjunto. 


Exemplo: recupera os irmãos antecessores dos divs e spans. 


$("div, span”).prevAl1() 


http: //api.jquery.com/prevAll 


‘© AJAX 


A forma básica de interacáo entre os usuarios e as páginas web é limitada. Quando o usuario 
clica em um link ou em um botáo de uma página web, uma requisicáo HTTP é enviada ao servidor 
correspondente. Quando chegar no servidor, essa requisição será processada. No término desse 
processamento, o servidor enviará uma resposta HTTP contendo uma página web para a máquina 
do usuário. Ao receber essa resposta, o navegador do usuário carregará a página inteira. 


Nessa abordagem, muitas vezes, ocorre um desperdício de tempo, pois, na maior parte dos ca- 
sos, não seria necessário carregar a página inteira e sim pequenos “pedaços” dela. Mesmo assim, o 
navegador sempre carregará todo o conteúdo das páginas web. 


Além disso, há outro problema nessa abordagem, o usuário não pode interagir com a página 
web durante o envio da requisição HTTP; processamento no servidor; envio da resposta HTTP e 
carregamento do página. 


Para aumentar a interatividade entre os usuários e as páginas web, podemos utilizar a forma 
de interação conhecida como AJAX (Asynchronous Javascript and XML). Nessa outra abordagem, 
os navegadores podem atualizar “pedaços” de uma página web sem ter carregá-la completamente. 
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Além disso, com AJAX, os usuários podem interagir com as páginas web durante o envio da requisição 
HTTP; processamento no servidor; envio da resposta HTTP e carregamento parcial das paginas web. 


Utilizaremos os recursos da biblioteca jQuery para implementar a interação entre os usuários e 
as páginas web com AJAX. 


load 


Podemos obter conteúdo de Web Server através do método load. Esse método realiza requisições 
HTTP do tipo GET com AJAX. No exemplo abaixo, o conteádo do documento HTML k19.html obtido 
do servidor e inserido no corpo do elemento com id="conteudo". 


$("#conteudo”).load("k19.htm1”); 


get 


Podemos realizar requisições HTTP do tipo GET com AJAX através do método get. Esse método 
recebe como parámetro a URL correspondente à requisição que desejamos realizar. No exemplo 
abaixo, a requisição foi realizada para URL k19.php mas o resultado foi ignorado. 


$.get("k19. php”); 


Para recuperar o resultado da requisicáo devemos utilizar o método done. Devemos passar como 
argumento para esse método a função que tratará o resultado. Essa função receberá o resultado 
como parámetro. Observe, no exemplo abaixo, que o resultado é exibido no console do navegador. 


var get - $.get("k19.php"); 


get.done(function(resultado) { 
console.log(resultado); 


DE 


Também podemos enviar dados para o servidor. Veja o exemplo a seguir. 


var dados = { 
nome: "Rafael”, 
empresa: "K19" 


3 
var get - $.get("k19.php", dados); 


get.done(function(resultado) { 
console.log(resultado); 
DE 


Esses dados são enviados como parâmetro na URL da requisição. 
k19.php?nome=Rafael&empresa=K19 


post 


Podemos realizar requisições HTTP do tipo POST com AJAX através do método post. Esse mé- 
todo funciona de forma semelhante ao método get. Veja alguns exemplos. 


$.post("k19. php”); 
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var post = $.post("k19.php”); 


post.done(function(resultado) { 
console. log(resultado) ; 


DE 


var dados = { 
nome: "Rafael”, 
empresa: "K19" 


>; 
var post = $.post("k19.php”, dados); 


post.done(function(resultado) { 
console. log(resultado) ; 


338 


Esses dados sao enviados corpo da requisicáo HTTP. 


k19.php?nome-Rafael&empresa-K19 


C Exercícios de Fixacáo 


(17) No projeto jQuery, crie um arquivo chamado ajax.php. 


1 [<?php 

2 |$soma = $_REQUEST[”x”] + $_REQUEST["y"]; 
3 

4 echo $soma; 

5 [BR 


Código HTML 5.11: ajax.php 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao17.zip 


o No projeto jQuery, crie um arquivo chamado ajax.html. 


1 |<!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - jQuery</title> 

6 <script src="http://code. jquery.com/jquery-1.10.1.min.js"></script> 
7 <Sschipt src=" ajax. jisi' ></script> 

8 </head> 

9 <body> 

10 <form action="ajax.php” method="post"> 

11 <label for="x">X:</label> 

12 <input idz"x" namez"x" type="text"> 

ife: «label for="y">Y:</label> 

14 <input idz"y" namez"y" type="text"> 

15 

16 <input type="submit” valuez"Enviar"» 

17 </form> 

18 

19 <p id="resultado"></p> 

20 </body> 
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21 [</html> | 


Código HTML 5.12: ajax.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao18.zip 


O No projeto jQuery, crie um arquivo chamado ajax.js. 


1 |$(document).ready(function() { 

2 $("input[type-z'submit']").click(function() £ 
3 var x = $("#x").val(); 

4 var y = $("#y").val(); 

5 

6 Se pOsiti( aia pm oc: XE y 
7 .done(function(soma) ( 

8 $("#resultado”).html (soma); 

9 P; 

10 

11 return false; 

12 

13 DE 

14 PE 


Código Javascript 5.148: ajax.js 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao19.zip 


o No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/jQuery/public. html/ajax.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/~<USUARIO>/jQuery/public_html/ajax.html 


A Exercícios Complementares 


o No projeto jQuery, crie um arquivo chamado jquery-complementar.html. 


à 


width: 100%; 

padding: 10px; 

position: fixed; 
background-color: white; 
border-bottom: 10px black solid; 


à 


à 


à 


à 


à. 


à 


1 «!DOCTYPE html» 
2 «html lang="pt-br” id="html"> 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 - Eventos - jQuery</title> 
6 <script src="http://code. jquery.com/jquery -1.10. 1. min. Js ></script> 
y <script src="jquery-complementar.js"></script> 
8 <style type="text/css"> 
9 #header { 
10 top: Opx; 
13 left: 0px; 
2 
3 
4 
5 
6 
7 
8 
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19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 


#saida { 
margin: Opx auto; 
width: 800px; 
height: 200px; 
overflow: auto; 


} 


#content ( 

width: 800px; 

Margin: 250px auto Opx; 
) 


pre { 
padding: 10px; 
border-radius: 15px; 
background-color: #eeeeee; 


} 


#divl, #div2 { 
background-color: yellow; 
width: 200px; 
height: 200px; 


) 

#div3 { 
background-color: blue; 
width: 50px; 
height: 50px; 
margin: auto; 

) 

</style> 
</head> 


<body idz"body"» 
<div id="header”> 
<div id="saida"></div> 
</div> 
<div id="content"> 


<h1>ready</h1> 
<pre id="ready-on"> 


59 $(document).ready(function() { 

60 var saida = $("#saida”); 

61 saida.append("evento ready disparado&lt;br&gt;"); 
62); 

63 |</pre> 

64 

65 <hl>resize</h1> 

66 <button id="resize">0N</button> 

67 |<pre> 

68 |/* ON */ 

69 |$(window).resize(function() { 

70 var largura = $(window).width(); 

71 var altura = $(window).height(); 

72 saida.append("resize: (" + largura + *, ” + altura + ”)”); 
73 saida.append("&lt;br&gt;"); 

74 saida.scrollTop(saida.prop("scrollHeight")); 

15 395 

76 

qu pes lee sy 

78 |$(window).off("resize"); 

79 «/pre» 

80 

81 <h1>scroll</h1> 

82 <button id="scroll">0N</button> 

83 |<pre> 

84 |/* ON */ 

85 $(window).scroll(function() { 

86 var x = $(window).scrollLeft(); 

87 var y = $(window).scrollTop(); 

88 salda.append( scroll: (ox. = = yt *)>); 
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89 saida.append("&lt;br&gt;"); 
90 saida.scrollTop(saida.prop("scrollHeight")); 
91 [395 


93 |\/* OFF */ 
94 |$(window).off("scroll"); 
95 |</pre> 


97 <h1>focus, focusin, blur e focusout</h1> 
98 <button id="foco">0N</button> 

99 |<pre> 

00 |/* ON */ 

101 i$C"*").on( focus focusin blur focusout", 

102| function(event) ( 

03 var tag - this.tagName; 

04 var id - this.id; 

105 var type - event.type; 


108 saida.append("&lt;br&gt;"); 

109 saida.scrollTop(saida.prop("scrollHeight")); 
Jj 

25 


à 


à 


à 
à 


à 
à 


/* OFF x/ 

SC k off O focus focusin blur focusout/^»5; 
</pre> 

<label>Teste:</label> 

<input id="input1"> 


à 


à 
my 


à 


à 
OANA FWNH— CO 


à 
à 


<h1>select</h1> 
<button id="select">0N</button> 
<pre> 
/* ON */ 
$("#input2”).select(function() { 
saida.append("select: (" + window. getSelection() + 
saida.append("&lt;br&gt;"); 
saida.scrollTop(saida.prop("scrollHeight")); 
DE 


io à à 
NNNNNNNNN h2 
OANA UN HPWH CO 


es lee ta) 
$("#input2”) .of f ( selecti); 
</pre> 
<label>Teste:</label> 
<input id="input2"> 


o à 
w w Q0 CO CO CO 
[1E LU oOo 


<h1>change</h1> 
<button id="change”>ON</button> 
<pre> 
/* ON x/ 
$("input3").change(function() { 
saida.append("change: (" + $(this).val() + ")"5; 
saida.append("&lt;br&gt;"); 
saida.scrollTop(saida.prop("scrollHeight")); 
DE 


ar pen EYE] 
Jo AU Q Q) Q) 
AWN] OO AND 


/* OFF x/ 
$("sinput3").off("change"); 
</pre> 
<label>Teste:</label> 
<input id="input3"> 


à Y y 
aarp HL 
=o wo ono 


«hi»keydown, keypress e keyup</h1> 
<button id="key”>ON</button> 
<pre> 
/* ON */ 
$("finput4").on("keydown keypress keyup”, 
function(event) ( 
var type - event.type; 


ii di à 
v anA ol 
Non A UC hN 


à 
c 
co 


07 saida. append (type + "(" + tae + ©, 4" * ad 4+ "y" 


727 38 
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59 
60 
161 
62 
63 
164 
165 
66 
67 
168 
169 
70 
171 
172 
73 
74 
175 
176 
77 
178 
179 
80 
81 
182 
183 
84 
85 
186 
87 
88 
189 
190 
91 
92 
193 
94 
95 
196 
197 
98 
99 
200 
201 
202 
203 
204 
205 
206 
207 
208 
209 
210 
211 
212 
213 


saida.append(type + ": (" + event.which + ")"); 
saida.append("&lt;br&gt;"); 
saida.scrollTop(saida.prop("scrollHeight")); 
3 
25 


/* OFF x/ 

$("finput4").off("keydown keypress keyup"); 
</pre> 

<label>Teste:</label> 

<input id="input4"> 


«hi»click, dblclick, mousedown, mouseup, mouseenter, 
mouseleave, hover, mouseover e mouseout</h1> 
<button id="mouse">0N</button> 
<pre> 
/* ON */ 


$("sdivi").on("click dblclick mousedown mouseup " + 


"mouseenter mouseleave hover mouseover mouseout", 
function(event) ( 
var type - event.type; 
saida.append(type + ": (" + event.which + ")"); 
saida.append("&lt;br&gt;"); 
saida.scrollTop(saida.prop("scrollHeight")); 
J 
DE 
/* OFF x/ 
$("sdivli").off("click dblclick mousedown mouseup " + 


"mouseenter mouseleave hover mouseover mouseout"); 
</pre> 
«div id="divl"><div id="div3"></div></div> 


<h1>mousemove</h1 > 
<button id="mousemove”>0ON</button> 
<pre> 
/* ON */ 
$("sdiv2").mousemove(function(event) { 
var x = event.pageX; 
var y = event.pageY; 
var type - event.type; 


saida.append(type + ": (" * x * ", " 4 y & ")"); 
saida.append("&lt;br&gt;"); 
saida.scrollTop(saida.prop("scrollHeight")); 

DE 


/* OFF x/ 
$("sdiv2").off("mousemove"); 
</pre> 
<div id="div2"></div> 
</div> 
</body> 
</html> 


Código HTML 5.13: jquery-complementar.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-complementar1.zip 


(2) No projeto jQuery, crie um arquivo chamado jquery-complementar.js. 


1 


/* ready */ 


2 |$(document).ready(function(){ 


3 var saida = $("#saida”); 

4 saida.append("evento ready disparado<br>”); 

5 
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6 /* resize x/ 

7 var resize - false; 

8 $("sresize").click(function() { 

9 if(resize) ( 

10 $(window).off("resize"); 

11 $("stresize").htm1("0ON"); 

12 resize - false; 

13 } else { 

14 $(window).resize(function() { 

15 var largura = $(window).width(); 

16 var altura = $(window).height(); 

17 saida.append( "resize: (" + largura + ", " + altura + ")"5; 
18 saida.append("<br>"); 

19 saida.scrollTop(saida.prop("scrollHeight")); 
20 295 

21 $("stresize").htm1("OFF"); 

22 resize - true; 

23 3 

24 325 

25 

26 RE seio x 

27 var scroll = false; 

28 $CURScrEOII"y.click(function() { 

29 if Cserolly: t 

30 $(window).off("scroll"); 

31 $("sscroll").html1("ON"); 

32 scroll - false; 

33 } else { 

34 $(window).scroll(function() { 

35 var x = $(window).scrollLeft(); 

36 var y = $(window).scrollTop(); 

37 SdidavappendiG® scrollc 4 nex ot ob ye S 
38 saida.append("«br»"); 

39 saida.scrollTop(saida.prop("scrollHeight")); 
40 D; 

41 $("sscroll").html("OFF"); 

42 scroll - true; 

43 3 

44 395 

45 

46 /* focus focusin blur focusout x/ 

47 var foco - false; 

48 SC’ #foco”) .click(function«) f 

49 if(foco) { 

50 SC o nano eus hoclsin DIU hOcuISOUe 9 
51 $("sfoco").htm1 ("ON"); 

52 foco - false; 

53 } else { 

54 SOD On focus focusin blur focusout 
55 function(event) { 

56 var tag = this.tagName; 

57 var id = this.id; 

58 var type = event.type; 

59 

60 saida.append(type + "(" + tag t ". 4" + id + os): 
61 saida.append("«br»"); 

62 saida.scrollTop(saida.prop("scrollHeight")); 
63 } 

64 DE 

65 $("sfoco").html1("OFF"); 

66 foco - true; 

67 } 

68 395 

69 

70 /* select x/ 

71 var select - false; 

72 $("fselect").click(function() { 

73 if(select) ( 

74 $("stinput2").off("select"); 

75 $("sselect").htm1("ON"); 
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76 select = false; 

77 } else { 

78 $("#input2”").select(function() { 

79 saida.append("select: (" + window. getSelection() + ")"); 
80 saida.append("«br»"); 

81 saida.scrollTop(saida.prop("scrollHeight")); 

82 D; 

83 $("#select”). html ("OFF"); 

84 select = true; 

85 3 
86 395 
87 
88 /* change x/ 

89 var change - false; 

90 $("#change”).click(function() { 

91 if(change) { 

92 $("#input3") .of f ("change"); 

93 $("#change”). html ("ON"); 

94 change = false; 

95 } else { 

96 $("#input3”).change(function() { 

97 saida.append("change: (" + $(this).val() + ")"); 
98 saida.append("<br>"); 

99 saida.scrollTop(saida.prop("scrollHeight")); 

100 DE 

01 $("#change”). html ("OFF"); 

02 change = true; 
103 B 

04 395 
05 
106 /* key */ 

107 var key - false; 

08 $("tkey").click(function() { 

09 if(key) € 
110 $("sinput4").off("keydown keypress keyup”); 

11 $("stkey").htm1("0ON"5; 

12 key - false; 

113 } else { 
114 $("#input4”).on(”keydown keypress keyup”, 

15 function(event) { 

16 var type = event.type; 

117 

18 saida.append(type + ": (" + event.which + ")"5; 

19 saida.append("<br>"); 

120 saida.scrollTop(saida.prop("scrollHeight")); 
121 } 

22 DE 

23 $("#key”). html ("OFF"); 
124 key = true; 
125 3 

26 D; 
127 
128 /* mouse x/ 

29 var mouse - false; 

30 $("#mouse”).click(function() { 
131 if(mouse) { 
132 $("#div1").off ("click dblclick mousedown mouseup ” + 

33 "mouseenter mouseleave hover mouseover mouseout"); 
134 $("smouse").html1("ON"); 

135 mouse - false; 

36 } else { 

37 $("tdivi").on("click dblclick mousedown mouseup " + 
138 "mouseenter mouseleave hover mouseover mouseout", 
139 function(event) ( 

40 var x = event.pageX; 

141 var y = event.pageY; 
142 var type - event.type; 

43 
44 saida appenditype + Nº cx RU. 0 ep ope Os 
145 saida.append("«br»"); 
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46 saida.scrollTop(saida.prop("scrollHeight")); 
47 } 

148 ); 

49 $("#mouse”). html ("OFF”) ; 

50 mouse = true; 

151 } 

152 395 

53 

54 /* mousemove x/ 

155 var mousemove - false; 

156 $("£fmousemove").click(function() { 

57 if(mousemove) ( 

158 $("sdiv2").off("mousemove"); 

159 $("smousemove").html1("ON"); 

60 mousemove - false; 

61 } else { 

162 $("#div2").mousemove(function(event) { 

163 var x = event.pageX; 

64 var y - event.pageY; 

165 var type - event.type; 

166 

67 Sellers Gpynaimel(Cieyye s Us (QU sp og ous "gn ae Y oa US 
68 saida.append("«br»"); 

169 saida.scrollTop(saida.prop("scrollHeight")); 
170 2; 

71 $("#mousemove”). html ("OFF"); 

72 mousemove = true; 

173 3 

74 1); 

75 |; 


Código Javascript 5.149: jquery-complementar.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-complementar2.zip 


e No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/jQuery/public. html/jquery-complementar.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/~<USUARIO>/jQuery/public_html/jquery-complementar.html 


Resumo do Capitulo 


p> Resumidamente, jQuery é uma biblioteca JavaScript. 
E Podemos obter a biblioteca jQuery na versão compressed ou uncompressed. 


p A utilizacáo de um CDN (Content Delivery Network), melhora o tempo de carregamento e a 
disponibilidade da biblioteca jQuery. 


p> O método on() permite associar eventos jQuery aos elementos HTML. 
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> O método off() permite dissociar eventos jQuery dos elementos HTML. 


> A biblioteca jQuery suporta todos os seletores do CSS. Além disso, ela oferece alguns seletores 
que não existem no CSS. 


E Podemos definir o tempo de duração dos efeitos e animações do jQuery. 


ES Podemos determinar uma função que deve ser executada ao término de um efeito ou anima- 
ção. 


b» A biblioteca jQuery oferece muitos recursos para a manipulação dos elementos HTML. 


Q Prova 


ES Qual alternativa está correta? 


a) jQuery é uma biblioteca JavaScript. 

b) jQuery é uma biblioteca HTML. 

c) jQuery é uma biblioteca CSS. 

d) jQuery é uma linguagem de programação. 


e) Todas as alternativas anteriores estão incorretas. 


Qual alternativa está correta? 


a) Geralmente, a utilização de CDNs aumenta a quantidade dados transmitidos entre os navega- 
dores e os Web Servers. 


b) Geralmente, a utilização de CDNs diminui a disponibilidade do conteúdo. 


c) Geralmente, a utilização de CDNs aumenta a latência na transmissão de dados para os nave- 
gadores. 


d) Geralmente, a utilização de CDNs aumenta a segurança dos sites e das aplicação web. 


e) Geralmente, a utilização de CDNs diminui o tempo de carregamento das páginas web. 


Quais alternativas estão corretas? 
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a) Podemos utilizar o método on() para adicionar os tratamentos dos eventos. 

b) Podemos utilizar o método enable() para determinar os tratamentos dos eventos. 

c) Podemos utilizar o método event() para adicionar ou eliminar os tratamentos dos eventos. 
d) Podemos utilizar o método off() para eliminar os tratamentos dos eventos. 


e) Podemos utilizar o método disable() para eliminar os tratamentos dos eventos. 


n Qual alternativa está correta? 


a) jQuery suporta apenas os seletores do CSS. 

b) jQuery nào suporta todos os seletores do CSS. 
c) jQuery nao suporta nenhum seletor CSS. 

d) jQuery suporta todos os seletores do CSS. 


e) Todas as alternativas anteriores estáo incorretas. 


Qual alternativa está correta? 


a) fadeOn, fadeOff são efeitos do jQuery. 

b) slideLeft e slideRight sáo efeitos do jQuery. 
c) hide e show são efeitos do jQuery. 

d) jQuery nào possui efeitos. 


e) Todas as alternativas anteriores estáo incorretas. 


nDn Quais alternativas estao corretas? 


a) O método empty() remove o contetido dos elementos selecionados. 

b) O after adiciona conteúdo imediatamente depois dos elementos selecionados. 
c) O before adiciona conteúdo imediatamente antes dos elementos selecionados. 
d) O addClass adiciona uma ou mais classes aos elementos selecionados. 


e) O clone cria uma cópia dos elementos selecionados. 


Qual alternativa está correta? 
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Minha Pontuacáo Pontuacáo Mínima: 4 Pontuação Máxima: É 


a) Autilização do AJAX elimina o código JavaScript. 

b) jQuery oferece diversos recursos para a utilização do AJAX. 
c) O principal objetivo do AJAX é facilitar a utilização do CSS. 
d) AJAX é uma biblioteca JavaScript. 


e) O nome AJAX foi inspirado no clube de futebol holandês. 


420 
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PROJETO 


APENDICE 


Para exercitar o contetido visto nesta apostila, implemete uma página web semelhante à imagem 
a seguir. 


000 = 


(CIL) @ ) 


K19 Blog 


Lorem ipsum dolor sit 0 
por Jonas Hirata 


Janeiro 2013 
Fevereiro 2013 
Marco 2013 
Abril 2013 

Maio 2013 
Junho 2013 
Julho 2013 
Agosto 2013 
Setembro 2013 
Outubro 2013 
Novembro 2013 
Dezembro 2013 


K19 Blog | Menu | 


Árvores ao redor de um lago no outono 


p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 
Lorem psum dolor sit 0 aie viverra justo sed adipiscing. acne Wee arcu lectus. 
por Jonas Hirata Praesent eleifend sapien et consequat ultricies. Donec varius, leo a 
condimentum porta, quam tortor lobortis metus, consectetur 
posuere enim metus vitae lorem. In tempor gravida arcu in 


Lorem ipsum dolor sit sollicitudin. Nullam molestie, sem vitae volutpat porta, ligula tortor 
amet, consectetur pretium diam, sed adipiscing magna massa ut nisl. Pellentesque 
adipiscing elit. Maecenas congue nisl vehicula leo tincidunt ultricies. 
Jovem wo Todos convallis viverra justo sed 
deumlagono @dipiscing. Maecenas p — — — Deixe o seu comentário — 
outono vitae arcu lectus. 


Praesent eleifend sapien [Nome 
et consequat ultricies. Donec varius, leo a 
condimentum porta, quam tortor lobortis 
metus, consectetur posuere enim metus Comentários 
vitae lorem. In tempor gravida arcu in 
sollicitudin. Nullam molestie, sem vitae 
volutpat porta, ligula tortor pretium diam, 
sed adipiscing magna massa ut nisl. 
Pellentesque congue nisl vehicula leo 
tincidunt ultricies. 4 


Comentar / Exibir comentários 


Jonas Hirata 
Praesent eleifend egestas volutpat. Quisque quis tortor ut odio 
adi] ing egestas sit amet ut nisl. Vivamus venenatis turpis id 
nisl facilisis, sed cursus odio scelerisque. 


“ P. 3 
Smartphone Desktop 


a Exercícios de Fixacáo 


o Abra o Netbeans e crie um projeto chamado blog. 
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Importante 
No Windows, utilizando o IIS (Internet Information Services) como Web Server, vocé 
deve salvar o projeto blog em C:\inetpub\wwwroot. Lembre-se que é necessário ins- 


talar o IIS conforme vimos anteriormente. 


Importante 
No Ubuntu, utilizando o Apache HTTP Server como Web Server, vocé deve salvar o 
projeto blog em /home/<USUARIO>/public html. Lembre-se que é necessário ins- 


talar e configurar o Apache HTTP Server como vimos anteriormente. 


eo NetBeans IDE 7.3 a 


abas ne JT 


<No Project Open> 


Figura A.1: Projeto blog 
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000 NetBeans IDE 7.3 e 
BEGET OE, JTH»? @ sern © 


Steps Choose Project 


1. Choose Project Categories: Projects: 
F at Cu —) 

PHP 
» [3 Samples KR 


Description: 
Creates a new HTMLS application configured for HTML, CSS and JavaScript. 


3 
r4 


EIN GD) ms 


Figura A.2: Projeto blog 


300 NetBeans IDE 7.3 e 


T w b E- 


. Choose Project 
- Name and Location 
. Site Template 


. JavaScript Files 
Project Folder: [Users /keizo/Sites /blog 


Figura A.3: Projeto blog 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-projeto-fixacaol.zip 


Ó No projeto blog, altere o arquivo index.html. 
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1 «!DOCTYPE html» 

2 |<html> 

3 <head> 

4 <title>K19 Blog</title> 

5 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
6 «meta name="viewport” content="width=device-width”> 
7 <link rel="stylesheet” type="text/css” href="css/principal.css"> 
8 <script type="text/javascript” src="http://code. jquery.com/jquery-2.0.3.min.js"> 
9 </script> 

10 <script type="text/javascript” src="js/principal.js"></script> 
11 </head> 

12 <body> 

13 <div id="main-wrapper”> 

14 «header id="main-header"> 

15 <h1>K19 Blog</h1> 

16 

17 <nav> 

18 <input id="main-menu-btn” type="button” value="Menu”> 
19 

20 <ul> 

21 <li><a href="#">Home</a></1li> 

22 <li><a href="#">Arquivo</a></li> 

23 <li><a href="#">Sobre</a></1li> 

24 suus 

25 </nav> 

26 </header> 

27 

28 «section id-"articles-container"» 

29 is 

30 Quando o DIV abaixo estiver na área visível da página 
31 um conjunto de posts será carregado via AJAX. 
32 mE 

33 <div id="lazy-load-point"></div> 

34 </section> 

35 

36 <aside> 

37 «section id="archive-links"> 

38 <header> 

39 <h1>Arquivo</h1> 

40 </header> 

41 

42 sul 

43 <li><a href="#">Janeiro 2013«/a»«/li» 

44 <li><a href="#">Fevereiro 2013«/a»«/li» 

45 <li><a href="&">Março 2013«/a»«/li» 

46 <li><a href="#">Abril 2013</a></1li> 

47 <li><a href="#">Maio 2013«/a»«/li» 

48 <li><a href="#">Junho 2013</a></1li> 

49 <li><a href="#">Julho 2013«/a»«/li» 

50 <li><a href="#">Agosto 2013«/a»«/li» 

51 <li><a href="#">Setembro 2013</a></li> 

52 <li><a href="#">Outubro 2013«/a»«/li» 

53 <li><a href="#">Novembro 2013</a></li> 

54 <li><a href="#">Dezembro 2013</a></li> 

55 </ul> 

56 </section> 

by «/aside» 

58 

59 «footer» 

60 <small>&copy; K19 Treinamentos 2013.</small> 

61 </footer> 

62 </div> 

63 </body> 

64 |</html> 


Cédigo HTML A.1: index.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-projeto-fixacao2.zip 
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6 No projeto blog, crie um arquivo chamado principal.css em uma pasta chamada css. 


1//x Declarando as fontes que serão utilizadas na pagina. x/ 

2 |@font-face { 

3 font-family: ’Roboto’; 

4 src: url(’Roboto-Regular-webfont.eot’); 

5 src: url(’Roboto-Regular-webfont.eot ?#iefix’) format(’ embedded-opentype’), 
6 url('Roboto-Regular-webfont.woff') format(’woff’), 

7 url('Roboto-Regular-webfont.ttf') format(’truetype’), 

8 url(’ Roboto-Regular-webfont.svg#RobotoRegular’) format(’svg’); 

9 font-weight: normal; 

10 font-style: normal; 

1 |} 

12 

13 |@font-face { 

14 font-family: ’Roboto’; 

15 src: url(’Roboto-Italic-webfont.eot’); 

16 src: url(’Roboto-Italic-webfont.eot?#iefix’) format(’ embedded-opentype’), 
17 url('Roboto-Italic-webfont.woff') format(’woff’), 

18 url('Roboto-Italic-webfont.ttf') format(’truetype’), 

19 url(’Roboto-Italic-webfont.svg#RobotoItalic’) format(’svg’); 

20 font-weight: normal; 

21 font-style: italic; 

22 |} 

23 

24 |@font-face { 

25 font-family: *Roboto’; 

26 src: url(’Roboto-Bold-webfont.eot’); 

27 src: url(’Roboto-Bold-webfont.eot?#iefix’) format(’ embedded-opentype’), 
28 url('Roboto-Bold-webfont.woff') format(’woff’), 

29 url('Roboto-Bold-webfont.ttf') format(’truetype’), 

30 url(’ Roboto-Bold-webfont.svg#RobotoBold’) format(’svg’); 

31 font-weight: bold; 

32 font-style: normal; 

33 |} 

34 

35 |\@font-face { 

36 font-family: "Roboto': 

37 src: url('Roboto-BoldItalic-webfont.eot'); 

38 src: url(’Roboto-BoldItalic-webfont.eot?#iefix’) format (' embedded-opentype’), 
39 url('Roboto-BoldItalic-webfont.woff') format(’woff’), 

40 url('Roboto-BoldItalic-webfont.ttf') format(’truetype’), 

41 url(’ Roboto-BoldItalic-webfont.svg#RobotoBoldItalic’) format('svg'); 
42 font-weight: bold; 

43 font-style: italic; 

44 |} 

45 

46 |@font-face { 

47 font-family: *Roboto’ ; 

48 src: url(’Roboto-Thin-webfont.eot’); 

49 src: url(’Roboto-Thin-webfont.eot?#iefix’) format(’ embedded-opentype’), 
50 url('Roboto-Thin-webfont.woff') format(’woff’), 

51 url('Roboto-Thin-webfont.ttf') format(’truetype’), 

52 url(’ Roboto-Thin-webfont.svg#RobotoThin’) format(’ svg’); 

53 font-weight: 200; 

54 font-style: normal; 

5) 3 

56 

57 |@font-face ( 

58 font-family: "Roboto': 

59 src: url('Roboto-Thinitalic-webfont.eot ); 

60 src: url(’Roboto-ThinItalic-webfont.eot?#iefix’) format(’ embedded-opentype’), 
61 url('Roboto-ThinItalic-webfont.woff') format(’woff’), 

62 url('Roboto-ThinItalic-webfont.ttf') format(’truetype’), 

63 url(’ Roboto-ThinItalic-webfont.svg#RobotoThinItalic’) format(’ svg’); 
64 font-weight: 200; 

65 font-style: italic; 

66 |} 

67 

68 |@font-face { 
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69 font-family: "Roboto': 

70 src: url('Roboto-Light-webfont.eot'); 

71 src: url(’Roboto-Light-webfont.eot?#iefix’) format(’ embedded-opentype’), 
72 url('Roboto-Light-webfont.woff') format(’woff’), 

73 url('Roboto-Light-webfont.ttf') format(’truetype’), 

74 url(’ Roboto-Light-webfont.svg#RobotoLight’) format(’svg’); 

15 font-weight: 100; 

76 font-style: normal; 

77 |) 

78 

79 |@font-face { 

80 font-family: "Roboto': 

81 src: url(’Roboto-LightItalic-webfont.eot’); 

82 src: url(’Roboto-LightItalic-webfont.eot?#iefix’) format(’ embedded-opentype’), 
83 url(’ Roboto-LightItalic-webfont.woff’) format(’woff’), 

84 url(’Roboto-LightItalic-webfont.ttf’) format(’truetype’), 

85 url(’Roboto-LightItalic-webfont.svg#RobotoLightItalic’) format('svg'); 
86 font-weight: 100; 

87 font-style; italic; 

88 |} 

89 

90 |@font-face { 

91 font-family: "Roboto': 

92 src: url('Roboto-Medium-webfont.eot"); 

93 src: url(’Roboto-Medium-webfont.eot?#iefix’) format(’ embedded-opentype’), 
94 url('Roboto-Medium-webfont.woff') format(’woff’), 

95 url('Roboto-Medium-webfont.ttf') format(’truetype’), 

96 url(’ Roboto-Medium-webfont.svg#RobotoMedium’) format(’svg’); 

97 font-weight: 300; 

98 font-style: normal; 

99 |} 

00 

01 |@font-face ( 

02 font-family: "Roboto': 

03 src: url('Roboto-MediumItalic-webfont.eot'); 

04 src: url(’Roboto-MediumItalic-webfont.eot?#iefix’) format('embedded-opentype'), 
05 url('Roboto-MediumItalic-webfont.woff') format(’woff’), 

06 url('Roboto-MediumItalic-webfont.ttf') format(’truetype’), 

07 url(’ Roboto-MediumItalic-webfont.svg#RobotoMediumItalic’) format('svg'); 
08 font-weight: 300; 

09 font-style: italic; 

10 |) 

11 

12 |/* 

13 Removendo as margens internas e externas de todos os elementos para 
14 evitar diferenças entre os navegadores. 

15 |*/ 

16 [8% 

17 margin: 0; 

18 padding: 0; 

19 font-family: "Roboto', ’helvetica’, ’arial’, 'sans-serif'; 

20 |} 

21 

22 |@media (max-width: 480px) { 

23 body { 

24 font-size:1.2rem; 

25 } 

26 

27 .show-comments { 

28 display: inline; 

29 } 

30 

31 .article-comments form, 

32 .article-comments article { 

33 display: none; 

34 3 

35 |} 

36 

37 (media (min-width: 640px) { 

38 #articles-container ( 
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39 width: 70%; 

40 float: left; 

141 } 

42 

43 aside { 

144 width: 28%; 

145 float: left; 

46 margin: 0 0 0 2%; 

47 } 

148 

149 .article-comments form, 

50 .article-comments article ( 
151 display: block; 

152 B 

53 
54 #main-header nav { 

155 display: inline-block; 

156 vertical-align: middle; 

57 } 

158 

159 #main-header nav input:first-child { 
60 display: none; 

61 } 

162 

163 #main-header nav ul, 

64 #main-header nav li { 

65 display: inherit; 

166 vertical-align: inherit; 

67 } 

68 
169 #main-header nav ul { 

170 margin: 0 0 O 4em; 

71 } 

72 
173 #main-header nav li { 

74 background: white; 

75 border-radius: 0.3em; 
176 padding: 0.3em 0.5em; 
177 font-size: 0.8em; 

78 margin: 0 0.5em; 

79 color; black; 

180 3 

81 
82 #main-header nav li a { 
183 color: inherit; 

184 text-decoration: none; 

85 3 
86 
187 #main-header nav li:hover { 
188 background: #38c3f2; 

89 color: white; 

190 } 
191 

92 .article-text figure ( 
93 margin-bottom: 1em; 
194 } 

195 

96 .article-text figure img { 
197 width: 100%; 

198 B 

99 
200 .article-text figure figcaption ( 
201 font-size: 0.5em; 

202 font-style: italic; 

203 text-align: center; 

204 3 

205 |} 

206 

207 |emedia (min-width: 480px) { 
208 body { 
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209 font-size:1.5rem; 
210 } 
211 
212 .show-comments { 
213 display: none; 
214 } 
215 |} 
216 
217 |emedia (max-width: 640px) { 
218 #main-header nav { 
219 position: absolute; 
220 top: lem; 
221 right: 0.5em; 
222 text-align: right; 
223 } 
224 
225 #main-header nav input:first-child { 
226 background: white; 
227 border-radius: 0.3em; 
228 border:none; 
229 padding: 0.3em 0.5em; 
230 font-size: 0.8em; 
231 margin: 0 0 0.1em 0; 
232 cursor: pointer; 
233 3 
234 
235 #main-header nav input:first-child:hover { 
236 color: #38c3f2; 
237 } 
238 
239 #main-header nav ul { 
240 display: none; 
241 border-radius: 0.3em; 
242 background: white; 
243 list-style-type: none; 
244 padding: 0.6em; 
245 box-shadow: 3px 3px 10px rgba(0, 0, O, 0,8); 
246 3 
247 
248 #main-header nav li { 
249 text-align: left; 
250 padding: 0.3em; 
251 color: black; 
252 3 
253 
254 #main-header nav li a { 
255 color: inherit; 
256 text-decoration: none; 
257 3 
258 
259 #main-header nav li:hover { 
260 color: #38c3f2; 
261 3 
262 
263 .article-text figure { 
264 float: left; 
265 margin: 0 0.6em 0.6em 0; 
266 width: 5em; 
267 3 
268 
269 .article-text figure img { 
270 width: 100%; 
271 } 
272 
273 .article-text figure figcaption { 
274 font-size: 0.7em; 
275 font-style: italic; 
276 text-align: center; 
277 } 
278 |} 
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280 |&main-wrapper { 

281 max-width: 980px; 
282 width: 100%; 

283 margin: 0 auto; 

284 |} 

285 

286 |&main-header { 

287 position: relative; 
288 background: black; 
289 padding: 0.8em; 

290 |} 

291 

292 |#main-header h1 { 

293 color: white; 

294 font-size: 1.5em; 
295 display: inline-block; 
296 vertical-align: middle; 
297 |} 

298 

299 larticle header { 

300 background: #38c3f2; 
301 color: white; 

302 padding: 0.8em; 

303 |} 

304 

305 larticle header hi { 
306 font-size: 1.2em; 
307 |} 

308 

309 larticle header h2 ( 

31 font-size: 0.8em; 

31 font-weight: normal; 
312 |} 

3 


.article-text { 
padding: 0.8em; 
J 


.article-text p { 
font-size: 0.8em; 
margin-bottom: 0.8em; 


} 


#archive-links header { 
background: #888; 
color: white; 
padding: 0.8em; 

} 


#archive-links header hl! { 
font-size: lem; 


} 


#archive-links ul { 
padding: 0.8em 0 0.8em 1.6em; 
color: #888; 
font-size: 0.8em; 


} 


#archive-links li { 
padding: 0.2em 0; 
J 


#archive-links li a { 
color: inherit; 
text-decoration: none; 


} 


#archive-links li a:hover { 
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349 color: #38c3f2; 
350 |} 
351 
352 |.article-comments { 
353 padding: 0 0.8em; 
354 |} 
355 
356 |.article-comments > input:first-child { 
357 border: none; 
358 background: #00c425; 
359 color: white; 
360 font-size: 0.8em; 
361 padding: 0.3em 0.5em; 
362 cursor: pointer; 
363 margin: 0 0 2em 0; 
364 |} 
365 
366 |.article-comments fieldset { 
367 border: 1px solid #999; 
368 padding: 0.8em; 
369 text-align: right: 
370 margin: 0 O 1em 0; 
371 |} 
372 
373 .article-comments fieldset legend { 
374 padding: 0 0.2em; 
375 color: #999; 
376 |} 
377 
378 .article-comments fieldset input:not([type-z'submit']), 
379 |.article-comments fieldset textarea{ 
380 display: block; 
381 font-size: 0.8em; 
382 margin: 0 0 0.5em 0; 
383 width: 100%; 
384 border: 1px solid #999; 
385 padding: 0.2em; 
386 |} 
387 
388 |.article-comments fieldset textarea ( 
389 height: 10em; 
390 |} 
391 
392 .article-comments fieldset input[type=’submit’] ( 
393 border: none; 
394 background: #00c425; 
395 color: white; 
396 font-size: 0.8em; 
397 padding: 0.3em 0.5em; 
398 cursor: pointer; 
399 |} 
400 
401 .article-comments article ( 
402 margin: 0 O 1em 0; 
403 |} 
404 
405 |.article-comments article p { 
406 font-size: 0.8em; 
407 color: #444; 
408 margin: 0 0 0 1em; 
409 |} 
410 
411 |#lazy-load-point { 
412 height: 24px; 
413 |} 
414 
415 |#lazy-load-point.loading { 
416 background: url(’ajax-loader’) no-repeat center; 
417 |} 
418 
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419 |footer { 

420 text-align: center; 
421 clear: left; 

422 |} 
423 
424 |footer small { 

425 font-size: 0.5em; 
426 |} 


Cédigo CSS A.1: principal.css 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-projeto-fixacao3.zip 


o No projeto blog, crie um arquivo chamado servico.php. 


1 |<?php for ($i = 0; $i < 3; $i++): ?> 

2 <article> 

3 <header> 

4 <hi>Lorem ipsum dolor sit <?php echo $i ?></h1> 

5 <h2>por Jonas Hirata</h2> 

6 </header> 

7 

8 <div class-"article-text"» 

9 <figure> 

10 <img 

11 src="img/paisagem. jpg” 

12 title-"Paisagem" 

13 alt="Arvores ao redor de um lago no outono"» 

14 <figcaption>Arvores ao redor de um lago no outono</figcaption> 
15 «/figure» 

16 <p> 

17 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
18 Maecenas convallis viverra justo sed adipiscing. 

19 Maecenas vitae arcu lectus. Praesent eleifend sapien et 
20 consequat ultricies. Donec varius, leo a condimentum 
21 porta, quam tortor lobortis metus, consectetur posuere 
22 enim metus vitae lorem. In tempor gravida arcu in 

23 sollicitudin. Nullam molestie, sem vitae volutpat 

24 porta, ligula tortor pretium diam, sed adipiscing magna 
25 massa ut nisl. Pellentesque congue nisl vehicula leo 
26 tincidunt ultricies. 

27 </p> 

28 </div> 

29 

30 <div class="article-comments"> 

31 <input 

32 class="show-comments” 

33 type="button” 

34 value="Comentar/Exibir comentários”> 

35 

36 <form> 

37 <fieldset> 

38 <legend>Deixe o seu comentário</legend> 

39 <input type="text” placeholder="Nome"> 

40 <input type="email” placeholder="E-mail"> 

41 <textarea placeholder="Comentários"></textarea> 

42 <input type="submit” value="Enviar”> 

43 </fieldset> 

44 </form> 

45 

46 <article> 

47 <small>Jonas Hirata</small> 

48 <p> 

49 Praesent eleifend egestas volutpat. Quisque quis 
50 tortor ut odio adipiscing egestas sit amet ut 

51 nisl. Vivamus venenatis turpis id nisl 

52 facilisis, sed cursus odio scelerisque. 
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53 </p> 
54 </article> 
55 </div> 


56 </article> 
57 |<?php endfor; ?> 


Código HTML A.2: servico.php 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- jquery-fixacao4.zip 


(5) No projeto blog, crie um arquivo chamado principal.js em uma pasta chamada js. 


1 Ívar scrollTimeout = 0; 

2|var isLoadingArticles = false; 

3 

4 $(document).ready(function() { 

5 $(’#articles-container’).on(’click’, '.show-comments', function(e) { 
6 $(this).parent().find('form, article').slideDown(); 

7 $(this).hide(); 

8 3978 

9 

10 // Trata o evento de clique no botào de menu adicionando uma classe 
11 // ao mesmo para indicar que o mesmo está expandido. 

12 $(’#main-menu-btn’).click(function(e) { 

13 e.stopPropagation(); 

14 $(this).parent().find('ul').addClass('expanded').slideDown(); 

15 395 

16 

17 // Trata o evento de clique em qualquer área da página para contrair e 
18 // remover a classe expanded do menu principal. 

19 $(’html’).click(function(e) { 

20 $(’#main-header ul.expanded').removeClass('expanded').slideUp(400, function() € 
21 $(this).removeAttr('style'); 

22 395 

23 325 

24 

25 $(window).scroll(function() € 

26 // Utilizando um timeout para evitar chamadas excessivas 

27 // à função afterScroll(). 

28 clearTimeout(scrollTimeout); 

29 scrollTimeout = setTimeout(afterScroll, 500); 

30 395 

31 

32 // Carregando os artigos assim que a página for carregada. 

33 loadArticles(); 

34 |; 

35 

36 |function afterScroll() { 

37 if (!isLoadingArticles && $(’#lazy-load-point’).isOnScreen()) { 

38 loadArticles(); 

39 3i 

40 |} 

41 

42 |function loadArticles() { 

43 $.ajax({ 

44 unde e senvacosphp 

45 dataType: ‘html’, 

46 beforeSend: function(jqXHR, settings) { 

47 isLoadingArticles = true; 

48 

49 // Exibe o GIF animado que indica o carregamento do conteüdo. 
50 $(’#lazy-load-point’).addClass(’ loading’); 

51 >, 

52 complete: function() { 

53 // O uso do timeout neste ponto é desnecessário. Foi utilizado aqui 
54 // para dar tempo do GIF animado ser visualizado em um servidor 
55 if Vocal, 
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56 setTimeout(function() { 

57 isLoadingArticles = false; 

58 // Oculta o GIF animado que indica o carregamento do conteüdo. 
59 $(’#lazy-load-point’).removeClass(’ loading’); 

60 DI O O ODE: 

61 >, 

62 success: function(data, textStatus, jqXHR) { 

63 // O uso do timeout neste ponto é desnecessário. Foi utilizado aqui 
64 // para dar tempo do GIF animado ser visualizado em um servidor 
65 1 oca 

66 setTimeout(function() { 

67 $(’#articles-container’).prepend(data) ; 

68 3s 10955 

69 >, 

70 error: function(jqXHR, textStatus, errorThrown) { 

71 alert(errorThrown); 

72 3 

73 395 

74 |) 

75 


76 |// Extendendo o jQuery com o método isOnScreen que verifica se um 
77 // elemento está na região visível da página. 
78 $.fn.isOnScreen - function() ( 


79 var win - $(window); 

80 

81 var viewport - ( 

82 top: win.scrollTop(), 
83 left: win.scrollLeft() 
84 3; 


85 viewport.right = viewport.left + win.width(); 
86 viewport.bottom - viewport.top * win.height(); 
87 
88 var bounds = this.offset(); 

89 bounds.right - bounds.left * this.outerWidth(); 
90 bounds.bottom - bounds.top * this.outerHeight(); 


91 

92 return (!(viewport.right < bounds.left || 
93 viewport.left » bounds.right || 

94 viewport.bottom < bounds.top || 

95 viewport.top > bounds.bottom)); 

96 |); 


Código Javascript A.1: principal.js 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-projeto-fixacao5.zip 


(6) Copie o arquivo k02-projeto.zip da pasta K19-Arquivos para a sua Área de trabalho. Descom- 
pacte esse arquivo e copie o conteúdo das pastas css e img para as pastas css e img do projeto blog 
respectivamente. 


O arquivo k02-projeto.zip também está disponível em http://k19.com.br/arquivos. 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-projeto-fixacao6.zip 


© No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/blog/public_html/index.html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //1localhost/-«USUARIO? /blog/public. html/index.html. 
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QUIZZES 


APENDICE 


Q Quiz 1 


Considere uma pagina HTML contendo um <div> com largura (width) 200px, margem 
interna (padding) 10px e borda de 3px. Visualmente, qual é o espaço horizontal ocupado por 
esse elemento? 


a) 200px 
b) 203px 
c) 210px 
d) 213px 


e) 226px 


De acordo com o Box Model do CSS visto no Capítulo 3, ao atribuirmos margens internas e bor- 
das em um elemento com largura definida fazemos com que, visualmente, a largura ocupada por 
esse elemento seja a soma das propriedades width, padding-left, padding-right, border- 
left e border-right. Como utilizamos a propriedade padding com o valor 10px para definir 
as margens internas, podemos considerar que temos 10px nas propriedades padding-left e 
padding-right. A mesma idéia se aplica à propriedade border, portanto temos border-left 
e border-right com 3px cada. 


Fazendo a soma temos: 200px (width) + 10px (padding-left) + 10px (padding-right) + 3px (border- 
left) + 3px (border-right) = 226px 


Portanto o espaço horizontal visualmente ocupado pelo elemento é de 226px. 
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PENDICE 


A 


Questão 1.1 


Questão 1.2 


Questão 1.3 


Questão 1.4 


Questão 1.5 


Questão 1.6 


a a e £ D 
a 


Exercicio Complementar 2.1 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
bibendum pellentesque hendrerit. Aliquam pretium, quam in porttitor 


= 


1 «!DOCTYPE html» 

2|«html langz"pt-br"» 

3 «head» 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>K19 Treinamentos</title> 
6 </head> 

7 

8 <body> 

9 <p> 

0 

1 
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12 vestibulum, massa ligula sodales metus, nec hendrerit nunc purus eu 

13 mauris. 

14 </p> 

15 </body> 

16 |</html> 


Código HTML 2.159: pagina-simples.html 


No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/pagina-simples.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/pagina-simples.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar1 .zip 


Exercicio Complementar 2.2 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 <meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Curiosidades do Mundo</title> 

6 </head> 

7 

8 <body> 

9 «hi»Curiosidades do Mundo</h1> 

10 

11 <h2>Europa</h2> 

12 <p>A Europa é o segundo menor continente em superficie do mundo, cobrindo 
13 cerca de 10 180 000 quilómetros quadrados ou 2% da superficie da Terra 

14 e cerca de 6,8% da área acima do nivel do mar.</p> 

15 

16 <h3>Alemanha</h3> 

17 <p>Com 81,8 milhóes de habitantes em janeiro de 2010, o país tem a maior 

18 população entre os Estados membros da União Europeia e é também o lar da 

19 terceira maior população de migrantes internacionais em todo o mundo.</p> 
20 

21 <h4>Hesse</h4> 

22 <p>A capital é Wiesbaden e a maior cidade Francoforte do Meno (Frankfurt 

23 am Main), onde está localizado um dos maiores aeroportos do mundo e um 

24 centro financeiro de grande importância.</p> 

25 

26 <h5>Frankfurt</h5> 

27 <p>Frankfurt am Main ou Francoforte do Meno, mais conhecida simplesmente como 
28 Frankfurt, é a maior cidade do estado alemão de Hesse e a quinta maior cidade 
29 da Alemanha, com uma população 700.000 habitantes em 2012.</p> 

30 

31 <h2>Ásia</h2> 

32 <p>A Ásia é o maior dos continentes, tanto em área como em população .</p> 
38 

34 <h3>Japão</h3> 

35 <p>0 país é um arquipélago de 6 852 ilhas, cujas quatro maiores são Honshu, 
36 Hokkaido, Kyushu e Shikoku, representando em conjunto 97% da área 

37 terrestre nacional.</p> 

38 

39 <h4>0kinawa</h4> 

40 <p>Antigamente, Okinawa fazia parte de um reino independente, o reino Ryukyu, 
41 o que foi decisivo para o desenvolvimento de uma cultura própria do desenrolar 
42 de uma história particular e significativamente diferenciada do resto do 
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43 Japdo.</p> 

44 

45 <h5>Nago</h5> 

46 <p>De 21 de julho até 23 de julho de 2000, foi sede do encontro anual do G8.</p> 
47 

48 <p>Fonte: wikipedia. org</p> 

49 </body> 

50 |</html> 


Cédigo HTML 2.160: geografia.html 


No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public_html/geografia. html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/geografia.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar2.zip 


Exercício Complementar 2.3 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Seguro Treinamento - K19</title> 
</head> 


<body> 
<hi>Na K19 o aluno faz o curso quantas vezes quiser!</h1> 
<p> 
Comprometida com o aprendizado e com a satisfação dos seus alunos, a K19 
criou o Seguro Treinamento. «br» Ao contratar um curso, o aluno poderá 
refazé-lo quantas vezes desejar mediante a disponibilidade de vagas e 
pagamento da franquia do Seguro Treinamento. 
</p> 
</body> 
</html> 
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Código HTML 2.161: seguro-treinamento.html 


No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public_html/seguro-treinamento. html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/-«USUARIO? /html/public. html/seguro-treinamento.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar3.zip 


Exercício Complementar 2.4 
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Exercicio Complementar 2.5 


CR ee lc cl 2 
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<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
<meta http-equiv="Content-Type” content="text/html; 
<title>Caracteres especiais</title> 
</head> 


<body> 
«hi»Caracteres especiais</h1> 
<p> 
&cross; &sext; &ofcir; &check; &sharp; 
</p> 
</body> 
</html> 


charset=UTF -8"> 


Código HTML 2.162: caracteres-especiais.html 


No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public_html/caracteres-especiais. html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/caracteres-especiais.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar4.zip 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
<meta http-equiv="Content-Type” content="text/html; 
<title>Texto pré-formatado</title> 
</head> 


<body> 
<h1>Texto pré-formatado</h1> 
<pre> 
ABB D E E G 


gei x d e f g 
</pre> 
</body> 
</html> 


charset=UTF -8"> 


Código HTML 2.163: espacos-e-quebras-de-linha.html 


No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/html/public html/espacos-e-quebras-de-linha.html. 


No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public. html/espacos-e-quebras-de-linha.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar5.zip 
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Exercício Complementar 2.6 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Código Java</title> 

6 </head> 

7 <body> 

8 <h1>Código Java</h1> 

9 <code> 

10 double numero = Math.random(); 
11 </code> 

12 </body> 

13 «/html» 


Código HTML 2.164: codigo-java.html 


No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/html/public. html/codigo- java.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/codigo- java.html 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar6.zip 


Exercício Complementar 2.7 


SUDOCTYPE htm 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Elemento i e elemento b</title> 
</head> 
<body> 
«hi»Elemento i e elemento b</h1> 
«ul» 
<li>Porquinho-da-india ou <i>Cavia porcellus</i></li> 
<li><i>Backup</i>(cópia de segurança)</li> 
<li><i>shoot the breeze</i>(bater papo ou jogar conversa fora)</li> 
<li><i>Moskvá</i>(transliteração da palavra Moscou em russo)</li> 
<li><i>Se não sabes, aprende; se já sabes, ensina.</i> (Confúcio)</li> 
</ul> 


<p> 
Atualmente, praticamente todos os <b>sistemas corporativos</b> 
possuem <b>interfaces web</b>. Para quem deseja atuar no mercado 


E Illu 
OANA 01 3C!) l2—0o (000-1001 4» 00 n0 => 


20 de <b>desenvolvimento de software</b>, é obrigatório o conhecimento 
21 das linguagens: <b>HTML</b>, <b>CSS</b> e <b>JavaScript</b>. 

22 </p> 

23 </body> 

24 |</html> 


Código HTML 2.165: elementos-i-b.html 
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No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/html/public html/elementos-i-b.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/elementos-i-b.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar7 .zip 


Exercício Complementar 2.8 


SUDOCTYPE html 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>São Paulo</title> 
</head> 
<body> 
<hi>São Paulo</h1> 
<p> 
A cidade de São Paulo possui uma área de 1.523 km<sup>2</sup>. 
Em 2011, São Paulo emitiu 16,430 milhões de toneladas de 
CO<sub>2</sub>. 
</p> 
</body> 
</html> 
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Cédigo HTML 2.166: sao-paulo.html 


No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/html/public. html/sao-paulo.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/sao-paulo.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar8.zip 


Exercício Complementar 2.9 


O <strong>São Paulo FC</strong> é o único 
time brasileiro que ganhou <em>três vezes</em> 
o <strong>mundial de clubes</strong>. 

</p> 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>São Paulo FC</title> 
6 </head> 

7 <body> 

8 <h1>São Paulo FC</h1> 

9 <p> 

10 

11 

12 

13 
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14| </body> 
15 |</html> 


Código HTML 2.167: spfc.html 


No Windows, utilize o Chrome para acessar o endereço: 
http: //1localhost/html/public. html/spfc.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/spfc.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar9.zip 


Exercício Complementar 2.10 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 

5 <title>Citações</title> 

6 </head> 

7 <body> 

8 <p>0 que a Wikipédia fala sobre Java?</p> 

9 <blockquote cite="http://en.wikipedia.org/wiki/Java (programming language)"» 

10 <p> 

1 Java is a general-purpose, concurrent, class-based, object-oriented 

12 computer programming language that is specifically designed to have 

13 as few implementation dependencies as possible. 

14 </p> 

15 <p> 

16 The original and reference implementation Java compilers, virtual 

17 machines, and class libraries were developed by Sun from 1991 and 

18 first released in 1995. As of May 2007, in compliance with the 

19 specifications of the Java Community Process, Sun relicensed most 

20 of its Java technologies under the GNU General Public License.... 

21 </p> 

22 </blockquote> 

23 

24 <p> 

25 Galvào Bueno disse: 

26 <q cite-z"http://www.naosalvo.com.br/as-melhorespiores-frases-de-galvao-bueno-em— 
-um-so-lugar"» 

27 A seleção brasileira prioriza o coletivo e a individualidade 

28 </q>. 

29 </p> 

30 

31 <p> 

32 <cite> Dom Quixote</cite> de Miguel de Cervantes é um dos livros mais 

33 vendidos da história. 

34 </p> 

35 </body> 

36 |</html> 


Código HTML 2.168: mais-citacoes.html 


No Windows, utilize o Chrome para acessar o endereço: 


http://localhost/html/public_html/mais-citacoes.html. 
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Exercício Complementar 2.12 
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No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/mais-citacoes.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar10.zip 


«IDOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Abreviações</title> 
</head> 
<body> 
<h1>Abreviações</h1> 
<ul> 
<li><abbr title="Federal Bureau Investigation">FBI</abbr></li> 
<li><abbr title="Central Intelligence Agency">CIA</abbr></li> 
<li><abbr title="Crime Scene Investigation” >CSI</abbr></li> 
</ul> 
</body> 
</html> 


Código HTML 2.169: abbr.html 


No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/abbr.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/abbr.html. 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-html-complementar11.zip 


<IDOCTYPE html 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Definições</title> 
</head> 
<body> 
<h1>Definições</h1> 
<dl> 
<dt><dfn>Folha seca</dfn></dt> 
<dd> 
Chute que faz a bola percorrer uma trajetória em curva acentuada com 
uma queda brusca no final do percurso. 
</dd> 
<dt><dfn>Lanterna</dfn></dt> 
<dd> 
Equipe que ocupa a última posição de um campeonato. 
</dd> 
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19 <dt><dfn>Primeiro pau</dfn></dt> 
20 <dd> 
21 Trave mais próxima da origem de um cruzamento. 
22 «/dd» 
23 </dl> 
24 </body> 
25 «/html» 
Código HTML 2.170: mais-definicoes.html 
No Windows, utilize o Chrome para acessar o endereço: 
http: //localhost/html/public html/mais-definicoes.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http: //localhost/-«USUARIO? /html/public. html/mais-definicoes.html. 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar12.zip 
Exercício Complementar 2.13 
1 |«! DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exemplo de alterações</title> 
6 </head> 
7 <body> 
8 <h1>Alterações</h1> 
9 <p> 
10 <s>Atualmente, eu moro na Inglaterra.</s> 
11 <ins>Atualmente, eu moro no Brasil.</ins> 
12 <del>Eu quero conhecer a Siria.</del> 
13 </p> 
14 </body> 
15 |</html> 
Código HTML 2.171: mais-alteracoes.html 
No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/html/public html/mais-alteracoes.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http: //localhost/-«USUARIO? /html/public. html/mais-alteracoes.html. 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar13.zip 
Exercício Complementar 2.14 
1 |«! DOCTYPE html» 
2 |<html langz"pt-br"» 
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Exercício Complementar 2.15 
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<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Datas e horas</title> 
</head> 
<body> 
<h1>Datas e horas</h1> 
<ul> 
<li> 
O Brasil foi pentacampeão em <time datetime="2002-06-30">30 de Junho 
de 2002</time>. 
SB 
SINUS 
Ele não pode esquecer o «time datetime="03-08">Dia das mulheres</time>. 
sun 
«/ul» 
«/body» 
«/html» 


Código HTML 2.172: mais-datas.html 


No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/mais-datas.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/mais-datas.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar14.zip 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Texto marcado</title> 
</head> 
<body> 
«hi»Texto marcado</h1> 
<p> 
<mark>Ayrton Senna da Silva</mark> foi um piloto brasileiro de 
<mark>Fórmula 1</mark>, trés vezes campeão mundial, nos anos de 1988, 
1990 e 1991. Foi também vice-campedo no controverso campeonato de 1989 
e em 1993 
</p> 
</body> 
</html> 


Código HTML 2.173: texto-marcado.html 


No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public_html/texto-marcado. html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/texto-marcado.html. 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar15.zip 
Exercicio Complementar 2.16 
1 |<!DOCTYPE html» 
2 <html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Pontos Turísticos</title> 
6 </head> 
7 <body> 
8 <h1>Pontos Turísticos do Brasil</h1> 
9 
10 «dl» 
11 <dt>Ilha Bela - SP</dt> 
12 «dd» 
13 Praias, Trilhas e Mergulho em Náufrago. 
14 «/dd» 
15 <dt>Bonito - MS</dt> 
16 <dd> 
17 Mergulho em rios de aguas transparentes, cachoeiras, grutas e cavernas. 
18 </dd> 
19 <dt>Museu de Arte de São Paulo - SP</dt> 
20 <dd> 
21 Grande acervo com diversas obras de artistas consagrados. 
22 </dd> 
23 </dl> 
24 </body> 
25 vtm 
Código HTML 2.174: pontos-turisticos.html 
No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public html/pontos-turisticos.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http: //localhost/-«USUARIO? /html/public.html/pontos-turisticos.html. 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar16.zip 
Exercício Complementar 2.17 
1 HSNDOCTVPE mini. 
2 |<html langz"pt-br"» 
3 <head> 
4 <meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Como instalar o seu XPTO</title> 
6 </head> 
7 <body> 
8 <h1>Como instalar o seu XPTO - K19 Eletronics</h1> 
9 
10 <ol> 
11 <a 
12 Verifique se todos os acessórios estão presentes. 
13 </li> 
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14 <li> 

15 Coloque o aparelho na horizontal sobre uma superficie plana. 
16 b» 

17 «li» 

18 Conecte o aparelho ao computador utilizando um cabo USB. 

19 eue 

20 «li» 

21 Use o CD-ROM para instalação do software. 

22 eie 

23 «li» 

24 Conecte o aparelho à fonte de energia com um adaptador AC. 
25 e 

26 «i 

27 Ligue o aparelho e espere o reconhecimento do computador. 

28 n 

29 «/ol» 

30 </body> 

31 |</html> 


Exercício Complementar 2.18 
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Código HTML 2.175: manual-k19.html 


No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/html/public. html/manual-k19.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/manual-k19.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar17.zip 


<!DOCTYPE html» 
<html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Links</title> 
</head> 
<body> 
<h1>Links</h1> 
<ul> 
<li><a hrefz"http://www.k19.com.br"»K19«/a»«/li» 
<li><a href="http://www. wikipedia. org/">Wikipédia</a></li> 
<li><a hrefz"http://facebook.com"»Facebook«/a»«/1li» 
</ul> 
</body> 
</html> 


Código HTML 2.176: mais-links.html 


No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/mais-links.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http://localhost/-<USUARIO>/html/public html/mais-links.html. 
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Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar18.zip 
Exercicio Complementar 2.19 
1 ISIDOCTYPE html 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Imagens</title> 
6 </head> 
7 <body> 
8 <h1>K19 Treinamentos</h1> 
9 «img src="http://www.k19.com.br/css/img/main-header-logo.png” /> 
10 
11 <h2>Cursos</h2> 
12 <ul> 
13 <li> 
14 «img srcz"http://www.k19.com.br/figs/k21-logo-large.png" /> 
15 K21 - Persisténcia com JPA2 e Hibernate 
16 «/li» 
17 sli 
18 «img srcz"http://www.k19.com.br/figs/k22-logo-large.png" /» 
19 K22 - Desenvolvimento Web Avangado com JSF2, EJB3.1 e CDI 
20 MET 
21 <li> 
22 «img srcz"http://www.k19.com.br/figs/k23-logo-large.png" /> 
23 K23 - Integração de Sistemas com Webservices, JMS e EJB 
24 «/li» 
25 «/ul» 
26 </body> 
27 |</html> 
Cédigo HTML 2.177: mais-imagens.html 
No Windows, utilize o Chrome para acessar o endereco: 
http: //localhost/html/public. html/mais-imagens.html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 
http: //localhost/-«USUARIO» /html/public.html/mais-imagens.html. 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar19.zip 
Exercício Complementar 2.20 
1 [SIEDOCTYPE. html 
2 «html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html ; charset=UTF-8"> 
5 <title>Tabelas</title> 
6 </head> 
T <body> 
8 <table> 
9 <thead> 
10 <tr> 
11 <th>Continente/Subcontinente</th> 
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12 <th>Cidade</th> 

13 <th>Idioma</th> 

14 </tr> 

15 </thead> 

16 <tfoot> 

17 <tr> 

18 <td colspan="3">Última atualização: 11/2012</td> 
19 </tr> 

20 </tfoot> 

21 <tbody> 

22 <tr> 

23 <td rowspan="2">América do Sul</td> 
24 <td>Sdo Paulo</td> 

25 <td>Portugués</td> 

26 </tr> 

27 SUPS 

28 <td>Cidade do México</td> 
29 <td>Espanhol</td> 

30 </tr> 

31 <tr> 

32 <td rowspan="3">Asia</td> 
33 <td>Tóquio</td> 

34 <td>Japonês</td> 

35 </tr> 

36 <tr> 

37 <td>Xangai</td> 

38 <td>Mandarim</td> 

39 </tr> 

40 <tr> 

41 <td>Nova Délhi</td> 

42 <td>Hindi</td> 

43 </tr> 

44 <tr> 

45 <td>América do Norte</td> 
46 <td>Nova Iorque</td> 

47 <td>Inglês</td> 

48 </tr> 

49 </tbody> 

50 </table> 

51 </body> 

52 |</html> 


Código HTML 2.178: mais-tabelas.html 


No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public_html/mais-tabelas. html. 
No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/-<USUARIO>/html/public html/mais-tabelas.html. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar20.zip 


Exercício Complementar 2.21 


1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 


3 <head> 

4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Curriculo</title> 

6 </head> 
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7 <body> 

8 <h1>Cadastro de Currículo</h1> 

9 <form action="parametros.php” method="post"> 

10 

1 <fieldset> 

12 <legend>Informações Pessoais</legend> 

13 

14 «label for="nome id"»Nome: </label> 

15 <input 

16 id="nome. id” 

17 type="text” 

18 name-"nome" 

19 placeholder="Digite o seu nome" 

20 required» 

21 <br> 

22 

23 <label for="email id">Email: </label> 

24 <input 

25 id="email id” 

26 type="email” 

27 name="email” 

28 placeholder="Digite o seu email” 

29 required> 

30 <br> 

31 

32 «label for="nascimento id">Data de Nascimento: </label> 
33 <input 

34 id="nascimento id" 

35 type="date” 

36 name="nascimento” 

37 required> 

38 <br> 

39 

40 «label for="altura id">Altura(m): </label> 
41 «input 

42 id="altura. id" 

43 type="number” 

44 name="altura” 

45 step="0.01" 

46 min="0" 

47 max="2"> 

48 <br> 

49 

50 <label for="site id">Site: </label> 

51 <input 

52 id-z"site id" 

53 type="url” 

54 name="site” 

55 placeholder="Facebook, Linkedin, Twitter"> 
56 <br> 

57 

58 <label for="estado_civil_id”>Estado Civil: </label> 
59 <select id="estado civil id” name="estado-civil"> 
60 <option value="-1">Selecione</option> 
61 <option value="S">Solteiro</option> 
62 <option value="C">Casado</option> 

63 <option value="D">Divorciado</option> 
64 <option value="V">Viúvo</option> 

65 </select> 

66 <br> 

67 

68 <label>Sexo: </label> 

69 <input 

70 id="masculino id” 

71 type="radio” 

72 name="sexo” 

73 value="masculino"> 

74 «label for="masculino_id”>Masculino</label> 
75 <input 

76 id="feminino id" 
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77 type="radio” 

78 name=" sexo" 

79 valuez"feminino"» 

80 «label for="feminino_id”>Feminino</label> 
81 <br> 

82 </fieldset> 

83 

84 <fieldset> 

85 <legend>Endereco</legend> 

86 

87 <label for="cep_id”>CEP: </label> 
88 <input 

89 id="cep_id” 

90 type="text” 

91 name="cep” 

92 required> 

93 <br> 

94 

95 <label for="endereco id">Endereço: </label> 
96 <input 

97 id="endereco id" 

98 type="text” 

99 name="endereco” 
100 required> 
101 <br> 
102 </fieldset> 
103 
104 <fieldset> 
105 <legend>Contato</legend> 

06 
107 <label for="telefone id">Telefone: </label> 
108 <input 
109 id="telefone id" 

10 type="tel” 
111 name="telefone”> 

12 <br> 

13 
114 <label for="celular id">Celular: </label> 
115 <input 
116 id="celular id" 
117 type="tel” 
118 name="celular"> 

19 <br> 

20 </fieldset> 
121 
122 <fieldset> 
123 <legend>Conhecimentos</legend> 
124 
125 <input 
126 id="html_id” 

27 type="checkbox” 
128 name="conhecimentos” 
129 valuez"HTML"» 

30 «label for="html_id”>HTML</label> 
31 
132 «input 
133 idz"css id" 
134 type="checkbox” 
135 name="conhecimentos” 
136 value="CSS"> 
137 <label for="css id">CSS</label> 
138 
139 <input 
140 didi isa 
141 type="checkbox” 
142 name="conhecimentos” 
143 value="JS"> 
144 «label for="js id">JavaScript</label> 
145 <br> 
146 
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147 <label for="mais conhecimentos id">Mais conhecimentos</label> 
148 <textarea 
149 id="mais conhecimentos id" 

150 rows="10" 
151 cols="20" 
152 maxlength="500">Digite os seus conhecimentos</textarea> 
153 </fieldset> 
154 
155 <input type="submit” value="Enviar"> 
156 </form> 
157 </body> 
158 |</html> 
Código HTML 2.179: mais-formularios.html 
No Windows, utilize o Chrome para acessar o endereço: 
http://localhost/html/public html/mais-formularios.html. 
No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/html/public html/mais-formularios.html. 
Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-html-complementar21.zip 
Questão 2.1 
d 
Questão 2.2 
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Questão 2.3 
e 
Questão 2.4 
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Questão 2.5 
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Questão 2.6 
b 
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Questáo 2.7 


Questáo 2.8 


Questão 2.9 


Questao 2.10 


Questáo 2.11 


Questão 2.12 


Questao 2.13 
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Questão 3.3 


Questão 3.4 


Questão 3.5 


Questão 3.6 


Questão 3.7 


Questão 3.8 


Questão 3.9 


Questão 3.10 


Questão 3.11 


Questão 3.12 
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456 


Questáo 3.13 


Questão 3.14 


Questão 3.15 


Questão 3.16 


Questão 3.17 


| | | | | | | | | | | 


Exercício Complementar 4.1 


No projeto javascript, adicione um arquivo chamado exibe-numeros-1-50-2x.html e outro cha- 


mado exibe-numeros-1-50-2x.js. 


1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exibe os números de 1 até 50 duas vezes</title> 
6 <script type="text/javascript” src="exibe-numeros-1-50-2x.js"></script> 
7 </head> 
8 <body> 
9 </body> 
10 «/html» 
Código HTML 4.56: exibe-numeros-1-50-2x.html 
prot Over so Op Ms 2a mas) af 
2 for (var wr = ie y < Os Weep) 4 
3 console. log(y); 
a Jj 
5 |} 


Código Javascript 4.136: exibe-numeros-1-50-2x.js 


No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/javascript/public. html/exibe-numeros-1-50-2x.html 


No Ubuntu, utilize o Chrome para acessar o endereco: 
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http://localhost/~<USUARIO>/javascript/public_html/exibe-numeros-1-50-2x.html. 


Utilize o console do navegador para observar as mensagens exibidas. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02-javascript-complementar1.zip 


Exercicio Complementar 4.2 


No projeto javascript, adicione um arquivo chamado exibe-nome-k19.html e outro chamado exibe- 
nome-k19.js. 


1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exibe nome e K19</title> 
6 <script type="text/javascript” src="exibe-nome-k19.js"></script> 
7 </head> 
8 <body> 
9 </body> 
10 «/html» 
Código HTML 4.57: exibe-nome-k19.html 
io (ver x — OR xs Be x» d 
2 console.log("Rafael Cosentino"); 
3 
4 tor (Vary =] 0. y s da yer) X 
5 console. log("K19"); 
6 Jj 
7 |} 


Código Javascript 4.137: exibe-nome-k19.js 


No Windows, utilize o Chrome para acessar o endereco: 

http: //1localhost/javascript/public. html/exibe-nome-k19.html 

No Ubuntu, utilize o Chrome para acessar o endereco: 
http://localhost/~<USUARIO>/javascript/public_html/exibe-nome-k19.html. 


Utilize o console do navegador para observar as mensagens exibidas. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-complementar2.zip 


Exercicio Complementar 4.3 


No projeto javascript, adicione um arquivo chamado multiplos-de-tres.html e outro chamado multiplos- 
de-tres.js. 


1 «!DOCTYPE html» 

2 |<html langz"pt-br"» 

3 <head> 

«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Múltiplos de três</title> 

<script type="text/javascript” src="multiplos-de-tres.js"></script> 


SU e 
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</head> 
<body> 
</body> 


7 
8 
9 
0 «/html» 


= 


Código HTML 4.58: multiplos-de-tres.html 


for (var x = 1, x <= 60. x++) Y 
if (Ce % 3 = 0) e 
console. log("*"); 
} else { 
console. log(" xxx" 


) 


NOOR WN 


J 


Código Javascript 4.138: multiplos-de-tres.js 


No Windows, utilize o Chrome para acessar o endereço: 

http: //1localhost/javascript/public. html/multiplos-de-tres.html 

No Ubuntu, utilize o Chrome para acessar o endereço: 

http: //1localhost/-«USUARIO»? / javascript/public. html/multiplos-de-tres.html. 


Utilize o console do navegador para observar as mensagens exibidas. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-complementar3.zip 


Exercício Complementar 4.4 


No projeto javascript, adicione um arquivo chamado multiplos-de-quatro-e-sete.html e outro cha- 


mado multiplos-de-quatro-e-sete.js. 


1 |«! DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Múltiplos de quatro e sete</title> 
6 <script type="text/javascript” src="multiplos-de-quatro-e-sete.js"></script> 
7 </head> 
8 <body> 
9 </body> 
10 |</html> 
Código HTML 4.59: multiplos-de-quatro-e-sete.html 
1 |for (war x = 1; x <= 80; xt+) 4 
2 var resto4 = x%4; 
3 var resto7 = x%7; 
4 
5 if (resto4 == 0 || resto7 == 0) { 
6 console.log("*"); 
7 } else { 
8 console.log(x); 
9 Jj 
10 |} 


Código Javascript 4.139: multiplos-de-quatro-e-sete.js 
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Exercicio Complementar 4.5 


No Windows, utilize o Chrome para acessar o endereco: 

http: //1localhost/javascript/public. html/multiplos-de-quatro-e-sete.html. 

No Ubuntu, utilize o Chrome para acessar o endereco: 
http://localhost/-<USUARIO>/javascript/public html/multiplos-de-quatro-e-sete.html. 


Utilize o console do navegador para observar as mensagens exibidas. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-complementar4.zip 


No projeto javascript, adicione um arquivo chamado exibe-triangulo.html e outro chamado exibe- 


triangulo.js. 
1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exibe triângulo</title> 
6 <script type="text/javascript” src="exibe-triangulo.js"></script> 
7 </head> 
8 <body> 
9 </body> 
10 |</html> 
Código HTML 4.60: exibe-triangulo.html 
1 var linha = "x"; 
2|for(var contador = 1; contador <= 10; contador++) ( 
3 console.log(linha); 
4 linha += "x"; 
5 


Exercício Complementar 4.6 


Código Javascript 4.140: exibe-triangulo.js 


No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/javascript/public_html/exibe-triangulo. html 

No Ubuntu, utilize o Chrome para acessar o endereco: 
http://localhost/-<USUARIO>/javascript/public html/exibe-triangulo.html 


Utilize o console do navegador para observar as mensagens exibidas. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-complementar5.zip 


No projeto javascript, adicione um arquivo chamado exibe-triangulos.html e outro chamado exibe- 
triangulos.js. 


1[«! DOCTYPE html» | 
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2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Exibe triângulos</title> 
6 <script type="text/javascript” src="exibe-triangulos.js"></script> 
7 </head> 
8 <body> 
9 </body> 
10 |</html> 
Código HTML 4.61: exibe-triangulos.html 
1|var linha = "x"; 
2 |for(var contador = 1; contador <= 8; contador++) ( 
3 console. log(linha); 
4 var resto = contador % 4; 
5 if(resto == 0) 
6 imha E 
7 } else { 
8 linha += "x"; 
9 3 
10 |} 


Código Javascript 4.141: exibe-triangulos.js 


No Windows, utilize o Chrome para acessar o endereco: 

http: //1localhost/javascript/public. html/exibe-triangulos.html. 

No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/javascript/public html/exibe-triangulos.html. 


Utilize o console do navegador para observar as mensagens exibidas. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-complementar6.zip 


Exercício Complementar 4.7 


No projeto javascript, adicione um arquivo chamado fibonnaci.html e outro chamado fibonnaci.js. 


<!DOCTYPE html» 
«html langz"pt-br"» 
<head> 
«meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
<title>Fibonacci</title> 
<script type="text/javascript” src="fibonnaci.js"></script> 
</head> 
<body> 
</body> 
</html> 


COON AUN AwnNa 


= 


Código HTML 4.62: fibonnaci.html 


var penultimo = 0; 
var ultimo = 1; 
console. log(penultimo) ; 
console. log (ultimo) ; 


NOOB WDM 


for(var contador = 0; contador < 28; contador++) ( 
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8 var proximo = penultimo + ultimo; 
9 console. log(proximo) ; 

10 

11 penultimo = ultimo; 

12 ultimo = proximo; 

13 E 


Exercício Complementar 4.8 


Código Javascript 4.142: fibonnaci.js 


No Windows, utilize o Chrome para acessar o endereco: 
http: //1localhost/javascript/public. html/fibonnaci.html 

No Ubuntu, utilize o Chrome para acessar o endereço: 
http: //localhost/~<USUARIO>/javascript/public_html/fibonnaci.html. 


Utilize o console do navegador para observar as mensagens exibidas. 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-javascript-complementar7.zip 


No projeto javascript, adicione um arquivo chamado embaralha.html e outro chamado embara- 


lha.js. 
1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 <meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Embaralha</title> 
6 <script type="text/javascript” src="embaralha.js"></script> 
7 </head> 
8 <body> 
9 </body> 
10 |</html> 
Código HTML 4.63: embaralha.html 
var array - new Array(10); 
for(var i = 0; i < array length; i**)( 
arraylil = i; 
J 
for(var i = 0; i < array. length; i++){ 
console.log(array[il); 
J 
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torívar 3 — 0s X € OTT 
var posicaol = Math.floor(Math.random() * 10); 
var posicao2 = Math.floor(Math.random() * 10); 
var auxiliar = array[posicaol]; 


array[posicao1] = array[posicao2]; 


arrayLposicao2] = auxiliar; 
J 
console iog M CC LL LE D 
for(war 3 = 04 1 s array. length, TFA 


console.log(array[i]l); 
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24 |} 


Código Javascript 4.143: embaralha.js 


No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/javascript/public. html/embaralha. html 

No Ubuntu, utilize o Chrome para acessar o endereço: 
http://localhost/-<USUARIO>/javascript/public html/embaralha.html. 


Utilize o console do navegador para observar as mensagens exibidas. 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-javascript-complementar8. zip 


Exercício Complementar 4.9 


No projeto javascript, adicione um arquivo chamado ordena.html e outro chamado ordena.js. 


1 «!DOCTYPE html» 
2 |<html langz"pt-br"» 
3 <head> 
4 «meta http-equiv="Content-Type” content="text/html; charset=UTF-8"> 
5 <title>Ordena</title> 
6 <script type="text/javascript” src="ordena.js"></script> 
7 </head> 
8 <body> 
9 </body> 
10 |</html> 
Código HTML 4.64: ordena.html 
var array = new Array (10); 


for(var i = 0; i < array, length; i++)L 
arrayLi] = Math.floor(Math.random() * 10); 
J 


for(var i = 0; i < array. length, i**)( 
console. log(arrayLi]); 

J 

array.sort(); 


console logs ss E 


for(var i = 0; i < array.length; i++){ 
console.log(array[il); 


choc ER 
NOP WMH Oc «000-0014» UN => 


} 


Código Javascript 4.144: ordena.js 


No Windows, utilize o Chrome para acessar o endereco: 
http://localhost/javascript/public_html/ordena. html 
No Ubuntu, utilize o Chrome para acessar o endereço: 


http: //localhost/~<USUARIO>/javascript/public_html/ordena.html. 
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RESPOSTAS 


Utilize o console do navegador para observar as mensagens exibidas. 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/k02- javascript-complementar9.zip 


Questáo 4.1 


Questão 4.2 


Questão 4.3 


Questão 4.4 


Questão 4.5 


Questão 4.6 


Questão 4.7 


Questão 4.8 


Questão 4.9 
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Questão 5.1 


Questão 5.2 


[e] £e [e] c zo 
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e eJ 
£t = 
= Nn 
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puma, 

mm 


Questão 5.3 


Questão 5.4 


Questão 5.5 


i | i | i 


Questão 5.6 


todas as alternativas estáo corretas 


Questão 5.7 


| 
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